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

【问题标题】：How to go back to parent route from child route in nested route如何从嵌套路由中的子路由返回父路由
【发布时间】：2022-07-24 22:22:30
【问题描述】：

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

这是嵌套的导航结构。

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

到目前为止，我的嵌套路由按预期工作。现在我想从 Track(4) 回到 Album(3)。有一个链接相册可以导航回相册。那么如何从 Track 页面导航这条路径 /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>

【问题讨论】：

您是说您在特定的/artists/artist/xxx/album/yyy/track/zzz 曲目页面上，并且想要导航回作为正在呈现的TrackPage 的逻辑父级的特定/artists/artist/xxx/album/yyy" 专辑页面？这些链接在哪里呈现？

标签： reactjs react-router-dom

【解决方案1】：

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

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

Link

一个相对的<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"。

【讨论】：

【解决方案2】：

../ 正如 Drew Reese 所说，为我工作

【讨论】：