嵌套路由不起作用（React Router 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

内容以供显示。应用程序

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

下降路线：

后代路由是由

some

后代组件渲染的路由。这些必然需要渲染成 Routes 组件来处理进一步的路由匹配和渲染。

AuthApp

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>

有关更多信息，请参阅

如何在树深处嵌套路由

Answer 2

<Outlet />

将其放入您的家庭组件中，请在

此处

尝试此操作。

index.js

<BrowserRouter>
  <Navbar />
  <App />
</BrowserRouter>

App.js

您不需要创建

<>
  <Routes>
    <Route path="/" element={<Home />}>
      <Route path="auth">
        <Route path="login" element={<LoginRoute />} />
        <Route path="register" element={<RegisterRoute />} />
      </Route>
    </Route>
  </Routes>
</>

Home.js

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

Navbar.js

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

Answer 3

父文件

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="nested/*" element={<NestedRoutes />} />
</Routes>

NesteRoutes 文件

<Routes>
    <Route path="nested-route-a" element={<NestedRouteA />} />
    <Route path="nested-route-b" element={<NestedRouteB />} />
</Routes>