Nested routes in react router-dom not working

Question

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?

Answer 1

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 "/".