title: React Router V4 use names instead of numbers in URL
body: <p>I have followed a tutorial on <a href="https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf/" rel="nofollow noreferrer" title="Medium.com">Medium.com</a> and it has helped me a lot to understand how the router works. But I have a problem with the URL it is generating. In the example that is in the blog post you can click on a player and it shows all the players information. The problem is is that it uses the number in the URL. I want it to use for example the players name instead of the number.</p>
  <p>I have tried everything but it does not work.</p>
  <p>This is the component where all the information about the selected player is shown:</p>
  <pre><code>const Player = (props) =&gt; {
      const player = PlayerAPI.get(
         parseInt(props.match.params.number, 10)
     )
     if (!player) {
       return &lt;div&gt;Sorry, but the player was not found&lt;/div&gt;
     }
     return (
       &lt;div&gt;
         &lt;h1&gt;{player.name} (#{player.number})&lt;/h1&gt;
         &lt;h2&gt;Position: {player.position}&lt;/h2&gt;
         &lt;Link to='/roster'&gt;Back&lt;/Link&gt;
       &lt;/div&gt;
     )
   }
  
   export default Player
  </code></pre>
  <p>This is the code of the API where all the players are stored:</p>
  <pre><code>const PlayerAPI = {
   players: [
      { number: 1, name: &quot;Ben Blocker&quot;, position: &quot;G&quot; },
      { number: 2, name: &quot;Dave Defender&quot;, position: &quot;D&quot; },
      { number: 3, name: &quot;Sam Sweeper&quot;, position: &quot;D&quot; },
      { number: 4, name: &quot;Matt Midfielder&quot;, position: &quot;M&quot; },
      { number: 5, name: &quot;William Winger&quot;, position: &quot;M&quot; },
      { number: 6, name: &quot;Fillipe Forward&quot;, position: &quot;F&quot; }
    ],
    all: function() { return this.players},
    get: function(id) {
       const isPlayer = p =&gt; p.number === id
       return this.players.find(isPlayer)
     }
  }
  
   export default PlayerAPI
  </code></pre>
  <p>This is the render code:</p>
  <pre><code>render((
     &lt;BrowserRouter&gt;
       &lt;App /&gt;
     &lt;/BrowserRouter&gt;
  ), document.getElementById('root'));
  </code></pre>
  <p>This is the component to show all the players:</p>
  <pre><code>const FullRoster = () =&gt; (
     &lt;div&gt;
       &lt;ul&gt;
         {
           PlayerAPI.all().map(p =&gt; (
             &lt;li key={p.number}&gt;
               &lt;Link to={`/roster/${p.number}`}&gt;{p.name}&lt;/Link&gt;
             &lt;/li&gt;
           ))
         }
       &lt;/ul&gt;
     &lt;/div&gt;
   )
  
   export default FullRoster
  </code></pre>
  <p>I have tried everything I could thing of but it is not working. Any help would be appreciated. And if you want to see a working example of the full code please have a look at the blog post via the link above. I can't paste all the code from the blog post here.</p>
  <p>Kind regards.</p>