在IE 11中加载正常工作的React App时,如果在同一页面中使用Adobe Analytics,则会显示错误消息:
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>
这是带有我正在使用的polyfill的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中渲染它
问题是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中运行。