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

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

替换名称上的每个空格

React Router V4使用URL

1 个答案: