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

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

import { BrowserRouter, Routes, Route } from "react-router-dom";

//Layouts
import HomeLayoutRoute from "./components/layouts/HomeLayout";

//components
import Home from './components/Home';
//import Dashboard from './components/Dash';

// Routing
import PrivateRoute from "./components/routing/PrivateRoute";

// Screens
import PrivateScreen from "./components/loginscreens/PrivateScreen";
import LoginScreen from "./components/loginscreens/LoginScreen";
import RegisterScreen from "./components/loginscreens/RegisterScreen";
import ForgotPasswordScreen from "./components/loginscreens/ForgotPasswordScreen";
import ResetPasswordScreen from "./components/loginscreens/ResetPasswordScreen";

const App = () => {
  return (
    <BrowserRouter>
      <div className="app">
        <Routes> 
          <HomeLayoutRoute path="/" element={<Home />} />
          <PrivateRoute path="/" element={<PrivateScreen/>} />
          <Route path="/login" element={<LoginScreen/>} />
          <Route path="/register" element={<RegisterScreen/>} />
          <Route path="/forgotpassword" element={<ForgotPasswordScreen/>}/>
          <Route path="/passwordreset/:resetToken" element={<ResetPasswordScreen/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default App;

这是我的 App.js 文件这是错误：错误：您无法在另一个 .您的应用中不应包含多个。

此代码适用于 React-Router-Dom 版本 5，但是当我移至 React-Router-Dom 版本 6 时出现此错误。

【问题讨论】：

您显示的代码看起来不错；它只有一个路由器（<BrowserRouter> 元素）。所以它可能在重复路由器所在的其他组件之一中。
你能检查一下我在 React Router 版本 5 中使用的 App.js 代码
这是一个设计决定。版本 6 不再支持嵌套路由器。

标签： reactjs version react-router-dom

【解决方案1】：

从 React Router 版本 6 开始，将不支持嵌套路由器。例如，您不能在<BrowserRouter> 中使用<MemoryRouter>。

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

【讨论】：

【解决方案2】：

设置与此类似的 index.js 文件

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={ <App /> }>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

然后在你的 App.js 文件中删除 BrowserRouter

const App = () => {
  return (
      <div className="app">
        <Routes> 
          <HomeLayoutRoute path="/" element={<Home />} />
          <PrivateRoute path="/" element={<PrivateScreen/>} />
          <Route path="/login" element={<LoginScreen/>} />
          <Route path="/register" element={<RegisterScreen/>} />
          <Route path="/forgotpassword" element={<ForgotPasswordScreen/>}/>
          <Route path="/passwordreset/:resetToken" element={<ResetPasswordScreen/>}/>
        </Routes>
      </div>
  );
};

【讨论】：

【解决方案3】：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

//Layouts
import HomeLayoutRoute from "./components/layouts/HomeLayout";

//components
import Home from './components/Home';
//import Dash from './components/DashBoard';

// Routing
import PrivateRoute from "./components/routing/PrivateRoute";

// Screens
import PrivateScreen from "./components/loginscreens/PrivateScreen";
import LoginScreen from "./components/loginscreens/LoginScreen";
import RegisterScreen from "./components/loginscreens/RegisterScreen";
import ForgotPasswordScreen from "./components/loginscreens/ForgotPasswordScreen";
import ResetPasswordScreen from "./components/loginscreens/ResetPasswordScreen";


const App = () => {
  return (
    <Router>
      <div className="app">
        <Routes>
          <HomeLayoutRoute exact path="/" component={Home} />
          <PrivateRoute exact path="/" component={PrivateScreen} />
          <Route exact path="/login" component={LoginScreen} />
          <Route exact path="/register" component={RegisterScreen} />
          <Route
            exact
            path="/forgotpassword"
            component={ForgotPasswordScreen}
          />
          <Route
            exact
            path="/passwordreset/:resetToken"
            component={ResetPasswordScreen}
          />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

这是我在 React-Router-Dom 第 5 版中使用的代码，我认为第 6 版有问题

【讨论】：

【解决方案4】：

我使用的是react-router-dom 5.3.0 版，但找不到名为“Routes”的导出成员。不确定该成员是否来自旧版本的react-router-dom。

也就是说，我认为您可能希望将 <Routes> 替换为 <Switch>。

<Switch> 呈现与位置匹配的第一个子 <Route> 或 <Redirect>。

<BrowserRouter>
  <div className="app">
    <Switch> 
      <HomeLayoutRoute path="/" element={<Home />} />
      <PrivateRoute path="/" element={<PrivateScreen/>} />
      <Route path="/login" element={<LoginScreen/>} />
      <Route path="/register" element={<RegisterScreen/>} />
      <Route path="/forgotpassword" element={<ForgotPasswordScreen/>}/>
      <Route path="/passwordreset/:resetToken" element={<ResetPasswordScreen/>}/>
    </Switch>
  </div>
</BrowserRouter>

(https://reactrouter.com/web/api/Switch)

编辑： 至于错误：“你不能在另一个内部渲染一个。你的应用程序中不应该有多个”->我认为这可能与我上面提到的问题有关，但也可能是因为你里面有一个重复的路由器其他。（例如，组件 <ForgotPasswordScreen/> 内部包含另一个 <Route> 元素）。

【讨论】：

在版本 6 中替换为。
你说得对，我没有意识到这一点。而且似乎您也可以嵌套 Routes，所以这个错误对于这个版本没有多大意义。您可以在您的 package-lock/yarn.lock 中仔细检查您的项目是否真的在使用 react-router-dom v6？另外，请记住 v6 仍在积极开发中。

【解决方案5】：

如果没有什么对你有用，请执行此操作更改版本，但首先从 package.json 文件夹中删除 react-router-dom:6.something 依赖项，然后

1)。卸载以前的版本- npm 卸载 react-router-dom 2）。安装旧版本- npm install react-router-dom@5.0.0

【讨论】：