如何在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-paid路线，因为top-paid/ * 路线上的索引属性，但这并没有发生。我不知道我是否误解了索引属性和Outlet元素背后的功能，所以我需要任何人的帮助。我希望你理解这个问题。

先感谢您！

Answer 1

可能是因为您的索引路由配置错误。它不应该有文档中所述的路径：索引路由 - 没有路径的子路由，在父级 URL 的父级出口中呈​​现。。

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