如何从嵌套路由中的子路由返回父路由

Question

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

这是嵌套的导航结构。

1. 单击艺术家（将显示艺术家列表）/艺术家
2. 单击艺术家（将显示专辑列表）/artists/artist/xxx
3. 单击专辑（将显示曲目列表。/artists/artist/xxx/album/yyy
4. 单击轨道（显示歌词）。/艺术家/艺术家/xxx/专辑/yyy/track/zzz

到目前为止，我的嵌套路线正在按预期工作。现在我想从曲目（4）返回到专辑（3）。有一个链接相册可导航回相册。那么我如何从“跟踪”页面导航此路径 /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

如果我正确理解您的问题，您会问如何动态导航回父路线。

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

关联

相对<Link to>值（不以 开头/）相对于父路由进行解析，这意味着它构建在与呈现该 的路由匹配的 URL 路径之上<Link>。它可能包含..链接到层次结构中更上层的路由。在这些情况下，..其工作方式与命令行函数完全相同cd；每个 ..都会删除父路径的一段。

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

例子：

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

如果路径是"/artists/artist/xxx/album/yyy/track/zzz"，则单击链接将“向上/向后”导航两个路径段到"/artists/artist/xxx/album/yyy"。类似地，如果路径是"/artists/artist/xxx/album/yyy"，则单击相同的链接将再次“向上/向后”导航两个路径段到"/artists/artist/xxx"。