Вложенные маршруты с параметрами в React Router

Question

У меня проблема с маршрутизацией в моем приложении. У меня есть компонент Списки воспроизведения , где я выбираю список воспроизведения, который хочу воспроизвести, и после нажатия на указанный c список воспроизведения загружается компонент Плеер . Путь к Плейлистам выглядит так:

/playlists/toplists?name=Top%20Lists

Я бы хотел получить путь к Player вот так:

/playlists/toplists?name=Top%20Lists/player/r63yd?title=Today%27s%20Top%20Hits

Это потому что я хочу вернуться с Player на Playlists , даже если кто-то просто вставит ссылку на Player в браузер. Моя маршрутизация для плейлистов выглядит так:

<Route path="/playlists/:name" component={Playlists />} />

И я не знаю, что делать, чтобы иметь возможность маршрутизации от Player до Плейлистов с параметрами пути.

Answer 1

Вы можете применить что-то вроде этого:

import React, { useState, useEffect } from "react";
import { NavLink, BrowserRouter, Route } from "react-router-dom";

const Playlists = ({ location, history }) => {
  // somehow get some params
  const data = ["zero", "one", "two", "three", "four", "five"];

  const buttonHandler = (i) => {
    history.push(`${location.pathname}/${i}?param=${data[i]}`);
  };

  return (
    <div>
        <h3>Playlists</h3>
        {[...Array(5)].map((_, i) => (
            <button key={i} onClick={() => buttonHandler(i)}>
                {i}
            </button>
        ))}
     </div>
    );
  };

const Player = ({ location, match }) => {
  const query = new URLSearchParams(location.search);

  return (
    <div>
        <h3>Player</h3>
        <p>my id is: {match.params.id}</p>
        <p>my param from URL is: {query.get("param")}</p>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
        <NavLink to="/playlists">Playlists</NavLink>
        <Route exact path="/playlists" component={Playlists} />
        <Route path="/playlists/:id" component={Player} />
    </BrowserRouter>
  );
}

export default App;