React Nesting Router 在 react-router-dom v6 中不工作

Question

我正在使用 ERB（Electron React Boilerplate）并尝试使用 React Router Dom v6.2.1.
所以我将 Router 与 MemoryRouter 一起使用，因为 BrowserRouter 不是构建 windows 桌面应用程序的好方法。在这里，我面临一个问题。嵌套路由器在 MemoryRouter 中不工作。如果我在 BrowserRouter 中使用它，就可以了。
这是我的代码，请告诉我如何在 MemoryRouter 中制作嵌套路由器。

import { MemoryRouter as Router, Route, Routes } from 'react-router-dom';
import './App.css';
import AppLayout from './layouts/AppLayout';
import BaseLayout from './layouts/BaseLayout';
import Store from './redux/Store';


export default function App() {
  return (
    <Provider store={Store}>
      <Router>
        <BaseLayout>
          <Routes>
            <Route path="/" element={<AppLayout/>} />
            <Route path="/auth" element={<AuthLayout/>}>
              <Router path="login" element={<Login />} />
              <Router path="signup" element={<Signup />} />
              <Router path="forgot" element={<ForgotPassword />} />
            </Route>
          </Routes>
        </BaseLayout>
      </Router>
    </Provider>
  );
}

我得到了这样的警告控制台Location 'login' not found

请帮我解决这个问题。提前谢谢你。

这是附加代码。

import { Outlet } from "react-router";

const AuthLayout = () => {
  return(
    <Outlet />
  )
}

export default AuthLayout;



import { useEffect } from "react";
import { useNavigate } from "react-router";

const AppLayout = () => {
  const access = localStorage.getItem('access')
  const username = localStorage.getItem('username')
  let navigate = useNavigate()
  if (!access || !username){
    useEffect(() => {
      navigate('/auth/login')
    }, [])
  } else {
    useEffect(() => {
      navigate('/home/dashboard')
    })
  }
  return(
    <div>
      AppLayout
    </div>
  )
}

export default AppLayout;

Answer 1

对我来说似乎是一个错字。您应该将 Route 与另一个 Route 嵌套，但您似乎在嵌套 Router（这是您正在导入的 MemoryRouter）。只需将内部 Router 更改为 Route 即可解决问题。

<Provider store={Store}>
      <Router>
        <BaseLayout>
          <Routes>
            <Route path="/" element={<AppLayout/>} />
            <Route path="/auth" element={<AuthLayout/>}>
              <Route path="login" element={<Login />} />
              <Route path="signup" element={<Signup />} />
              <Route path="forgot" element={<ForgotPassword />} />
            </Route>
          </Routes>
        </BaseLayout>
      </Router>
    </Provider>

React Nesting Router 在 react-router-dom v6 中不工作

React Nesting Router is not working in react-router-dom v6

reactjs

electron

react-router-dom