错误:不变失败:即使我的结构很好，也不应该在<Router>之外使用<Router>

Question

我得到了一个错误：

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

但让我发疯的是，我的“开关”标签实际上被“BrowserRouter”包围着。

import {BrowserRouter, Route} from "react-router-dom";
import {Switch} from "react-router";
....
function App() {
    return (
        <AuthContext>
            <BrowserRouter>
                <div className="app">
                    <Switch>
                        <Route exact path='/login' component={Login}/>
                        <Route exact path='/register' component={Register}/>
                    </Switch>
                </div>
            </BrowserRouter>
        </AuthContext>
    );
}

在检查路由器模块版本时，我得到以下信息：

├─┬ connected-react-router@6.9.2 extraneous
│ └── react-router@6.0.2 deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
├─┬ react-router-dom@6.0.2 extraneous
│ └── react-router@6.0.2 deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
└── react-router@6.0.2 invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router extraneous

Answer 1

目前看来，connected-react-router不支持react-router-dom版本6。

├─┬连接-路由器@6.9.2无关的│└──react路由器@6.0.2撤销无效:节点_模块/连接-react路由器├─┬反应-路由器@6.0.2无关的│└──反应:路由器@6.0.2脱扣无效："^4.3.1 \x ^5.0.0“从节点_模块/连接-反应路由器└──反应-路由器@6.0.2无效:节点_模块/连接-react路由器中的“^4.3.1而维希^5.0.0”

您正在使用connected-react-router的最新版本(6.9.2)，您可以看到这里，它仍然将react-router-dom v4/5列为对等依赖项。

"peerDependencies": {
  "history": "^4.7.2",
  "react": "^16.4.0 || ^17.0.0",
  "react-redux": "^6.0.0 || ^7.1.0",
  "react-router": "^4.3.1 || ^5.0.0", // <-- not v6
  "redux": "^3.6.0 || ^4.0.0"
},

尽管似乎有一个更新connected-react-router以支持react-router-dom版本6的计划，但在connected-react-router的问题跟踪器中有一些关于这里的讨论，还有一个可能的解决方案。

除了这个可能的工作之外，如果您不迫切需要或希望使用react-router-dom版本6，那么我建议返回到版本5。从您的项目目录中运行以下命令来卸载v6并安装v5。

• npm uninstall -s react-router-dom
• npm install -s react-router-dom@5.3.0或任何其他特定的v5.x版本