5

Details: I have top level routing like this:

<Routes>
  <Route path='/*' element={<HomePage/>} />
  <Route path='/movies/*' element={<MoviesPage/>} />
  <Route path='/profile/*' element={<ProfilePage/>} />
  <Route path='/people/*' element={<PeoplePage/>} />
  <Route path='/auth' element={<LoginPage/>} />
</Routes>

Let's look the specific nested route /movies/*:

<Routes>
  <Route path='' element={<Outlet/>}>
    <Route index path='top-rated/*' element={<TopRatedMoviesPage/>} />
    <Route path='popular/*' element={<PopularMoviesPage/>} />
    <Route path='recommended/*' element={<RecommendedMoviesPage/>} />
    <Route path=':id/details' element={<MovieDetails/>} />
  </Route>
</Routes>

The problem: When I try to access /movies, the expected behaviour should be that it navigates to /movies/top-rated route because of the index property on the top-rated/* route, but this is not happening. I don't know if I misunderstood the functionality behind index property and Outlet element, so I need anyone's help with this. I hope You understand the problem.

Thank You in advance!

moze
  • 322
  • 1
  • 5
  • 14

1 Answers1

4

Probably because your index route is mis-configured. It should not have a path as said from the documentation: Index Route - A child route with no path that renders in the parent's outlet at the parent's URL..

index does not give auto navigation upon reaching /movies. However, if you navigates manually to /top-rated, the component should be there.

Hung Vu
  • 443
  • 3
  • 15