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

Question

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 时出现此错误。

Answer 1

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 有问题

Answer 2

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

的旧版本

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

<Switch> 呈现与位置匹配的第一个 child <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> 元素）。

Answer 3

从 React Router 版本 6 开始，将不支持嵌套路由器。因此，例如，您不能在 <BrowserRouter>.

中使用 <MemoryRouter>

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

Answer 4

设置与此类似的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>
  );
};

Answer 5

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

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

Answer 6

试试这个！

index.js

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter } from "react-router-dom";

import "./index.css";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

请注意，您需要导入 { Routes, Route } 而不是 { Route }（与以前的版本一样）。另请注意，在 App.js 文件中，无需再次导入 BrowserRouter。

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

import AllPages from "./pages/AllPages";
import NewContactsPage from "./pages/ContactsPage";
import FavoritesPage from "./pages/Favorites";

function App() {

  return (
    <div>
      <Routes>
        <Route path="/" element={<AllPages />} />
        <Route path="/new-contacts" element={<NewContactsPage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
      </Routes>
    </div>
  );
}

export default App;

Answer 7

我们发现这个问题是在我们使用 React Router version 6 时出现的。在这个版本中，不支持嵌套路由器。所以，我们卸载了版本6，安装了版本5，很快就解决了这个问题。

卸载版本 6：

npm uninstall react-router-dom

安装版本 5：

npm install react-router-dom@5.3.0

Answer 8

抱歉，但是，您不需要更改版本

如果您正在使用 React v.18 您必须更新渲染 @ index.js 以正确的和记录的方式来渲染 root/app 文件...请访问此 link 了解更多详情：Updates to Client Rendering APIs

在你的index.js中：

import { createRoot } from 'react-dom/client';
import { App } from './App';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab='home' />);

在你的App.jsx中：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { AppNav } from "./Components/AppNav";
import { Home } from "./Pages/Home";
import { Users } from "./Pages/Users";
export const App = () => {
  return (
    <Router>
      <AppNav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </Router>
  );

要查看有效的 sample/code，请访问：github.com/lodela/React18

希望对您有所帮助。荷兰

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

You cannot render a <Router> inside another <Router>. You should never have more than one in your app

version

reactjs

react-router-dom