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!