如何在 React Router v6 中的嵌套父路由上设置索引路由

Question

详情：我有这样的顶级路由：

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

我们看看具体的嵌套路由/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>

问题：当我尝试访问 /movies 时，预期的行为应该是导航到 /movies/top-rated由于 top-rated/* 路由上的 index 属性，但没有发生这种情况。我不知道我是否误解了 index 属性和 Outlet 元素背后的功能，所以我需要任何人的帮助。我希望你能理解这个问题。

提前谢谢你！

Answer 1

可能是因为您的索引路由配置错误。它不应该有文档中所说的路径：Index Route - A child route with no path that renders in the parent's outlet at the parent's URL.。

index 在到达/movies 时不提供自动导航。但是，如果您手动导航到 /top-rated，组件应该在那里。