React路由器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}/> 

UPDATE

组件

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 

注意我看到球员们是只有两个名称是可以用来代替（””， “ - ”）。如果有更多的名字，那么需要使用正则表达式可以替换名称上的每个空间减号