React router-dom 中的嵌套路由不起作用

Question

我不明白为什么嵌套路由不适用于我的项目。

这是我正在做的

<Routes>
<Route index element={<Home />} />
<Route path="/chat" element={<Chat />} />
<Route path="/video-moments" element={<VideoMoments />} />
<Route path="/notifications" element={<Notifications />} />
// here's the route i'm trying to nest
<Route path="/profile" element={<Profile />} >
  <Route path="/edit-profile" element={<EditProfile />} />
</Route>

然后在我的个人资料页面中，我呈现了一个插座，如下所示：

      <main className="profile-page">
    <LeftSideNav />
    <Outlet />
    {/* <ProfileContainer /> */}
    <RightSideNav />
  </main>

但是它不起作用，而是整个应用程序中断并且不显示任何内容，可能是什么问题？

Answer 1

您声明的嵌套路由的绝对路径不是父路由的 sub-route。

声明一个完整的绝对路径：

<Route path="/profile" element={<Profile />} >
  <Route path="/profile/edit-profile" element={<EditProfile />} />
</Route>

或构建相对路径，省略前导斜杠 "/":

<Route path="/profile" element={<Profile />} >
  <Route path="edit-profile" element={<EditProfile />} />
</Route>

绝对路径和相对路径之间的仅区分符是前导斜杠 "/".

React router-dom 中的嵌套路由不起作用

Nested routes in react router-dom not working

reactjs

react-router