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

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

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

我使用的是react-router-dom5.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>元素）。

像这样设置你的 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>
  );
};