IE11、Adobe Analytics、带有错误消息的 React-Router：“不变违规：您不应在 <Router> 之外使用 <Switch>”答案

【问题标题】：IE11, Adobe Analytics, React-Router with Error Message: "Invariant Violation: You should not use <Switch> outside a <Router>"IE11、Adobe Analytics、带有错误消息的 React-Router：“不变违规：您不应在 <Router> 之外使用 <Switch>”
【发布时间】：2019-09-16 21:32:44
【问题描述】：

在 IE 11 中使用 Adobe Analytics 在同一页面中加载其他正常工作的 React 应用程序时，它会给出错误消息：

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 中呈现

【问题讨论】：

它可能与this thread重复，尝试用BrowserRouter或其他替代品如HashRouter，MemoryRouter包装Switch。这是因为 BrowserRouter 和替代方案是所有路由器组件的通用低级接口，它们使用 HTML 5 历史 API，您需要它在路由之间来回导航。
感谢 cmets。不幸的是，它独立于路由器类型。我将在上面的文本中进行编辑。

标签： reactjs react-router internet-explorer-11 react-router-dom adobe-analytics

【解决方案1】：

问题出在 Polyfill 上。

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

我们将它们替换为

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

并确定，它们首先发生在入口 JS 文件中。

之后它在 IE 11 中工作。

【讨论】：