在React Router中带参数的嵌套路由。

Posted 2023-02-01

在我的应用程序中，我有一个路由的小问题。我得到了组件 播放列表 我选择我要播放的播放列表，点击特定的播放列表后，组件就会出现在我面前。玩家 已加载。路径到 播放列表 看起来是这样的。

/playlists/toplists?name=Top%20Lists

我想得到的路径是： 玩家 这样的。

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

这是因为我想需要从回来 玩家 到 播放列表即使有人只是粘贴链接到 玩家 进入浏览器。我的播放列表路由看起来是这样的。

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

我不知道该怎么做，才能让路由从 玩家 到 播放列表 与路径参数。

答案

你可以应用这样的东西。

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;