reactjs - 嵌套路由不起作用( react 路由器 v6)

Question

在互联网上浏览了一段时间后，我无法弄清楚为什么我的嵌套路由不起作用。

index.js
<BrowserRouter>
   12             <Navbar />
   13             <App />
   14         </BrowserRouter>

   App.js
   <>
   <Routes>
                   <Route path="/" element={<Home />}>
                      <Route path="auth" element={<AuthApp />} />
                   </Route>
    </Routes>
    <Outlet />
   </>

      authApp.js
    6 const AuthApp = () => {
    7     return (
    8         <>
    9             <Routes>
   10                 <Route path="login" element={<LoginRoute />} />
   11                 <Route path="register" element={<RegisterRoute />} />
   12             </Routes>
   13             <Outlet />
   14         </>
   15     );
>> 16 }

LoginRoute、Home 和 RegisterRoute 是非常简单的元素，现在应该只显示一个 h1。问题是/auth/login 和/auth/register 不起作用。链接应该是正确的(我也尝试手动输入网址)

<nav style={navStyle}>
               <CustomNavLink to="/" routeName="Home" />
               <CustomNavLink to="/auth/login" routeName="Login" />
               <CustomNavLink to="/auth/register" routeName="Register" />
</nav>

有人能发现问题吗？先感谢您。附加问题:每次我点击登录和注册链接时，我似乎都会点击两次。这是我在控制台中看到的输出:

No routes matched location "/auth/login" 
No routes matched location "/auth/login" 

有人能解释一下吗？

Answer 1

问题是因为嵌套路由与派生路由不同。

嵌套路由:

嵌套路由是直接嵌套在另一个Route组件中的Route组件。父级 Route 组件的 element 组件需要为嵌套路由渲染一个 Outlet 以将它们的 element 内容渲染到 for匹配时显示。

应用

<Route path="/" element={<Home />}>
  <Route path="auth" element={<AuthApp />} />
</Route>

后代路线:

后代路由是由一些后代组件呈现的路由。这些必然需要渲染到 Routes 组件中，以处理进一步的路由匹配和渲染。

授权应用

const AuthApp = () => {
  return (
    <>
      <Routes>
        <Route path="login" element={<LoginRoute />} />
        <Route path="register" element={<RegisterRoute />} />
      </Routes>
      <Outlet />
    </>
  );
}

为了使后代路由仍然能够匹配，父路由需要为其路径指定尾随通配符 "*" 匹配器。在本例中，它是 "/auth" 路径。将父路由更新为 "/auth/*" 以允许也匹配和呈现后代路由。

<Route path="/" element={<Home />}>
  <Route path="auth/*" element={<AuthApp />} />
</Route>

有关详细信息，请参阅 How do I nest routes deep in the tree