Reactjs 嵌套路由不会重定向到子屏幕

Question

在菜单中，我有相册。如果用户单击相册，将显示相册页面（所有相册）。如果用户单击相册，将显示 AlbumPage。所以我希望我的相册菜单仍处于选中状态。

但是如果我点击相册，路由就不起作用了。仍然显示 AlbumsPage。我没有看到任何错误。我的嵌套路线有什么问题？

路径

const paths = {
  home: "/",

  albums: "/albums",
  getAlbums: () => `/albums`,
  album: "album/:albumId",
  getAlbum: (albumId) => `album/${albumId}`,
};

export default paths;

旋转数

  <Routes>
    <Route path={paths.albums} element={<AlbumsPage />}>
      <Route path={paths.album} element={<AlbumPage />}></Route>
    </Route>
  </Routes>

Answer 1

如果我正确理解你的问题，你想要：

AlbumsPage 仅在 path="/albums"
AlbumPage 仅在 path="/albums/album/###"

您可以将 AlbumsPage 移动到索引路由中，以便在父 Route 组件的路径正好是 paths.albums 或 "/albums" 时匹配和呈现它。 AlbumPage 将继续在相对路径 paths.album 上呈现，或解析为 "/albums/album/###"。通过不为父级 Route 指定 element 属性，默认情况下将渲染 Outlet 组件以渲染嵌套 Route 组件。

<Routes>
  <Route path={paths.albums}>                            // "/albums" `Outlet` is rendered
    <Route index element={<AlbumsPage />} />             // "/albums"
    <Route path={paths.album} element={<AlbumPage />} /> // "/albums/album/###"
  </Route>
</Routes>

Reactjs 嵌套路由不会重定向到子屏幕

Reactjs nested routes is not redirect to child screen

reactjs

react-router-dom