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

Bobby 发表于 Dev

鲍比

我遵循了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

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

亲切的问候。

埃维利科夫92

不知道具体是如何写路由器的。首先链接您需要更改：

<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

应用程序接口

    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

注意我看到玩家只有两个名字，因为可以使用替换（“”，“-”）。如果有更多名称，则需要使用正则表达式，因为可以用减号替换名称上的每个空格

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。