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

Question

I have two navigation menu, Artists and Albums on menu bar. I am using react_rotuer_dom v6

Here is the nested navigation structure.

1. Click Artists (Artist list will show) /artists
2. Click Artist (Album list will show) /artists/artist/xxx
3. Click Album (Track list will show. /artists/artist/xxx/album/yyy
4. Click Track (show lyric). /artists/artist/xxx/album/yyy/track/zzz

So far my nested route is working as expected. Now I want to go back to Album(3) from Track(4). There is a link Album to navigate back to Album. So how can I navigate this path /artists/artist/xxx/album/yyy from Track page. I can give absolute path /artists/artist/xxx/album/yyy, it is working.

But What if I click Albums route. I am using same pages for Albums, Album, and Track. Please see my rote below. Am I using correct way for nested route.

path

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

<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>