Nested routes in react router-dom not working-CodePudding

i don't understand why nested routes is not working for my project.

Here's what i'm doing

<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>

and then in my profile page i render an outlet like so:

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

But it doesn't work, instead the whole app breaks and it doesn't display anything, what could be the problem?

CodePudding user response：

You are declaring the nested route with an absolute path that isn't a sub-route of the parent route.

Declare a full absolute path:

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

or to build a relative path, omit the leading slash "/":

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

The only differentiator between absolute and relative paths is the leading slash "/".