title: React api router can't show data in detail
body: <p>Im learning React with routing and api calls at the moment. I've got an api were I need to find all the urls and post them on a page that was successful. But now I need to make a detail page where I can show more information about the url. Page 1 is like : gather all the urls and show them in a list. And page 2 is if you have clicked on a url in the list on page 1 you will be navigated to page 2 where a detail dialog is showed.
  I have the page 1 completely and I can navigate to page 2 but I can't show any data from the api in page 2 information/detailpage.I don't know how to work with the key and get the info. I Tried several things but none of them works. Im using link.Link as key and I need description property , url , api name.</p>
  <p><strong>This is my page 1:</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import {Link, NavLink} from 'react-router-dom';
  import { Detail } from './Detail';
  
  export default class FetchLinks extends React.Component {
      state = {
          loading: true,
          links: [],
      };
      async componentDidMount() {
          const url = &quot;https://api.publicapis.org/entries?category=development&quot;;
          const response = await fetch(url);
          const data = await response.json();
          this.setState({links: data.entries, loading: false});
      }
      render() {
          if (this.state.loading) {
              return &lt;div&gt;loading...&lt;/div&gt;
          }
          if (!this.state.links.length) {
              return &lt;div&gt;geen links gevonden&lt;/div&gt;
          }
          return (
              &lt;div&gt;
                  {this.state.links.map(link =&gt; (
                      &lt;div key={link.Link}&gt;
                          &lt;ul&gt;&lt;li&gt;
                              &lt;p&gt;
                                  &lt;NavLink to={`/Detail/${link.Link}`}&gt;
                                      {link.Link}
                                  &lt;/NavLink&gt;
                              &lt;/p&gt;
                          &lt;/li&gt;&lt;/ul&gt;
                      &lt;/div&gt;))}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  <p><strong>this is page 2:</strong></p>
  <pre><code>import React from 'react';
  import Content from './Content';
  
  const Detail = () =&gt;{
  return(
      &lt;div&gt;
          &lt;h1&gt;Detail Page&lt;/h1&gt;
          &lt;p&gt;{this.state.links.Link}&lt;/p&gt;
      &lt;/div&gt;
  )
  
  
  }
  export default Detail();
  </code></pre>
  <p><a href="https://i.stack.imgur.com/jiSNB.png" rel="nofollow noreferrer">This is how it should be</a></p>