如何在嵌套路由中从子路由回到父路由

Question

我在菜单栏上有两个导航菜单，艺术家和专辑。我正在使用 react_rotuer_dom v6

这是嵌套的导航结构。

单击艺术家（将显示艺术家列表）/艺术家
点击艺术家（专辑列表将显示）/artists/artist/xxx
单击专辑（将显示曲目列表。/artists/artist/xxx/album/yyy
单击曲目（显示歌词）。 /artists/artist/xxx/专辑/yyy/曲目/zzz

到目前为止，我的嵌套路线按预期工作。现在我想从 Track(4) 返回到 Album(3)。有一个 link 相册可以导航回相册。那么我如何从轨道页面导航这条路径 /artists/artist/xxx/album/yyy 。我可以给绝对路径/artists/artist/xxx/album/yyy，它正在工作。

但是如果我点击相册路线呢？我对专辑、专辑和曲目使用相同的页面。请看下面我的死记硬背。我是否使用了正确的嵌套路由方式。

路径

const paths = {
  home: "/",

  artists: "/artists",
  getArtists: () => `/artists`,
  artist: "artist/:artistId",
  getArtist : (artistId) => `artist/${artistId}`,

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

  track: "track/:trackId",
  getTrack: (trackId) => `track/${trackId}`,
};

export default paths;

路线

<Routes>
    <Route path={paths.home} element={<HomePage />}></Route>

    <Route path={paths.artists}>
      <Route index element={<ArtistsPage />} />
      <Route path={paths.artist}>
        <Route index element={<AlbumsPage />} />
        <Route path={paths.album}>
          <Route index element={<AlbumPage />} />
          <Route path={paths.track} element={<TrackPage />}></Route>
        </Route>
      </Route>
    </Route>

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

Answer 1

如果我对你的问题的理解正确，你问的是如何动态导航返回到父路由。

就像路由使用相对路径构建路由树结构一样，links 也可以使用相对路径进行linking。

Link

A relative <Link to> value (that does not begin with /) resolves relative to the parent route, which means that it builds upon the URL path that was matched by the route that rendered that <Link>. It may contain .. to link to routes further up the hierarchy. In these cases, .. works exactly like the command-line cd function; each .. removes one segment of the parent path.

要向后导航两个路径段以从特定曲目返回到特定专辑，请使用 ../..。

示例：

<Link to="../..">Back to parent</Link>

如果路径是 "/artists/artist/xxx/album/yyy/track/zzz"，则单击 link 会将“up/back”两个路径段导航到 "/artists/artist/xxx/album/yyy"。同样，如果路径是 "/artists/artist/xxx/album/yyy"，则单击相同的 link 将再次将“up/back”两个路径段导航到 "/artists/artist/xxx"。

如何在嵌套路由中从子路由回到父路由

How to go back to parent route from child route in nested route

reactjs

react-router-dom