React Router V4 在 URL 中使用名称而不是数字

Question

我遵循了Medium.com 上的教程，它对我了解路由器的工作原理有很大帮助。但我对它生成的 URL 有疑问。在博客文章中的示例中，您可以单击一个播放器，它会显示所有播放器信息。问题是它使用了 URL 中的数字。我希望它使用例如球员姓名而不是号码。

我什么都试过了，还是不行。

这是显示所选玩家的所有信息的组件：

const Player = (props) => {
    const player = PlayerAPI.get(
       parseInt(props.match.params.number, 10)
   )
   if (!player) {
     return <div>Sorry, but the player was not found</div>
   }
   return (
     <div>
       <h1>{player.name} (#{player.number})</h1>
       <h2>Position: {player.position}</h2>
       <Link to='/roster'>Back</Link>
     </div>
   )
 }

 export default Player

这是存储所有玩家的 API 代码：

const PlayerAPI = {
 players: [
    { number: 1, name: "Ben Blocker", position: "G" },
    { number: 2, name: "Dave Defender", position: "D" },
    { number: 3, name: "Sam Sweeper", position: "D" },
    { number: 4, name: "Matt Midfielder", position: "M" },
    { number: 5, name: "William Winger", position: "M" },
    { number: 6, name: "Fillipe Forward", position: "F" }
  ],
  all: function() { return this.players},
  get: function(id) {
     const isPlayer = p => p.number === id
     return this.players.find(isPlayer)
   }
}

 export default PlayerAPI

这是渲染代码：

render((
   <BrowserRouter>
     <App />
   </BrowserRouter>
), document.getElementById('root'));

这是显示所有玩家的组件：

const FullRoster = () => (
   <div>
     <ul>
       {
         PlayerAPI.all().map(p => (
           <li key={p.number}>
             <Link to={`/roster/${p.number}`}>{p.name}</Link>
           </li>
         ))
       }
     </ul>
   </div>
 )

 export default FullRoster

我已经尝试了所有我能做的事情，但它不起作用。任何帮助，将不胜感激。如果您想查看完整代码的工作示例，请通过上面的链接查看博客文章。我无法在此处粘贴博文中的所有代码。

亲切的问候。

Answer 1

不知道到底是怎么写路由器的。 首先是您需要更改的链接：

<Link to={`/roster/${p.number}`}>{p.name}</Link>
// To
const name = p.name.replace(" ", "-"); // replace all empty characters with - 
<Link to={`/roster/${name}`}>{p.name}</Link>

在路由器中，参数将是 p.name。而且可读性更强，需要换个路由器

我在教程中找到了一些类似的东西：

<Route exact path='/roster' component={FullRoster}/>
<Route path='/roster/:number' component={Player}/>
// To
<Route exact path='/roster' component={FullRoster}/>
<Route path='/roster/:name' component={Player}/>

更新

组件

    const Player = (props) => {
    const player = PlayerAPI.get(
       props.match.params.name.replace("-", " ");
   )
   if (!player) {
     return <div>Sorry, but the player was not found</div>
   }
   return (
     <div>
       <h1>{player.name} (#{player.number})</h1>
       <h2>Position: {player.position}</h2>
       <Link to='/roster'>Back</Link>
     </div>
   )
 }

 export default Player

API

    const PlayerAPI = {
 players: [
    { number: 1, name: "Ben Blocker", position: "G" },
    { number: 2, name: "Dave Defender", position: "D" },
    { number: 3, name: "Sam Sweeper", position: "D" },
    { number: 4, name: "Matt Midfielder", position: "M" },
    { number: 5, name: "William Winger", position: "M" },
    { number: 6, name: "Fillipe Forward", position: "F" }
  ],
  all: function() { return this.players},
  get: function(name) {
     const isPlayer = p => p.name === name
     return this.players.find(isPlayer)
   }
}

 export default PlayerAPI

完整名单

    const FullRoster = () => (
   <div>
     <ul>
       {
         PlayerAPI.all().map(p => () => {
            const name = p.name.replace(" ", "-");
            return (
                <li key={p.name}>
                  <Link to={`/roster/${name}`}>{p.name}</Link>
                </li>
            )
         })
       }
     </ul>
   </div>
 )

 export default FullRoster

注意 我看到玩家只有两个名字，可以使用replace(" ", "-")。如果有更多名称，则需要使用正则表达式，可以用减号替换名称上的每个空格