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 

注意我看到球員們是隻有兩個名稱是可以用來代替（」」， 「 - 」）。如果有更多的名字，那麼需要使用正則表達式可以替換名稱上的每個空間減號