IE11,Adobe Analytics,带有错误消息的React-Router:“不变违规:您不应该使用 在外面 ”

问题描述 投票:2回答:1

在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中渲染它

reactjs react-router internet-explorer-11 react-router-dom adobe-analytics
1个回答
0
投票

问题是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中运行。

© www.soinside.com 2019 - 2024. All rights reserved.