不能在另一个 <Router> 中渲染 <Router>。你的应用程序中不应该有多个答案

【问题标题】：cannot render a <Router> inside another <Router>. You should never have more than one in your app不能在另一个 <Router> 中渲染 <Router>。你的应用程序中不应该有多个
【发布时间】：2021-11-27 10:04:43
【问题描述】：

这是我的 index.js 代码

import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { createStore } from "redux";
import { userReducer } from "../src/reducers/UserReducer";
import { Provider } from "react-redux";
import { loadState, saveState } from "./store/LocalStorage";

const persistedState = loadState();
 
let store = createStore(userReducer, persistedState);

 
store.subscribe(() => saveState(store.getState()));
 
render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

这是我在浏览器上遇到的错误

“错误：您无法在另一个 <Router> 中呈现 <Router>。您的应用中不应包含多个。”

请帮我解决一下。

【问题讨论】：

就其本身而言，这段代码看起来不错。但显然，树中更远的一些其他组件正在渲染一个额外的路由器。尝试在您的代码库中搜索您导入 BrowserRouter 的位置。

标签： javascript reactjs react-redux

【解决方案1】：

我猜你正在使用 React Router 6。他们放弃了对嵌套 Routers 的支持（例如 BrowserRouter 内的 MemoryRouter 或任何其他组合）

https://github.com/remix-run/react-router/issues/7375

<UNSAFE_LocationContext.Provider 有相当的技巧，但顾名思义，不能保证这适用于任何（甚至是补丁版本）更新。

我建议你要么回到 V5 要么摆脱嵌套。

【讨论】：