Question

在同一页面中使用Adobe Analytics加载IE 11中正常运行的React App时，会显示错误消息：

Invariant Violation: You should not use <Switch> outside a <Router>

该错误不会在所有其他浏览器上出现，并且仅IE 11受到影响。它也与我使用的路由器类型无关。

如果我将Adobe Analytics取出=>可以。

这是我正在使用的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test Page</title>
        <SCRIPT src="//assets.adobedtm.com/<hash>-staging.js"
        ></SCRIPT>
    </head>
    <body>
        <noscript> You need to enable JavaScript to run this app. </noscript>
        <div id="reactRoot"></div>
    </body>
</html>

这是我正在使用的polyfills的React-Router部分

require('babel-polyfill');
require('es6-promise').polyfill();

class AppRouter extends Component {
    render() {
        return (
            <Router>
                <ErrorBoundary>
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/type/:type/:lang?" component={FormContainer} />
                        <Route path="/success/:type/:lang?" component={SuccessContainer} />
                        <Route path="/error/:code?" component={ErrorContainer} />
                        <Route component={NotFound} />
                    </Switch>
                </ErrorBoundary>
            </Router>
        );
    }
}

我的目标是使其在IE 11中呈现

Answer 1

问题出在Polyfills。

require('babel-polyfill');
require('es6-promise').polyfill();

我们将它们替换为

import '@babel/polyfill';
import * as ES6Promises from 'es6-promise';
//other imports here
ES6Promises.polyfill();

可以肯定的是，它们首先在条目JS文件中发生。

之后，它就可以在IE 11中使用了。

IE11，Adobe Analytics，React-Router并出现错误消息：“永久违反：您不应在<router>之外使用<switch>”

1 个答案: