title: Click to item details page not showing anything in React & ID undefined
body: <p>Probably a very easy one for a seasoned React dev but basically I’m getting data from a JSON Object to display the on a “Releases” page. When a user clicks, just wanted to show the details of that release ID but I can’t seem to get anything to show. Just want to show the image. description and title for each release. Thanks.</p>
  <p>Code from App.js</p>
  <pre><code>  const App = () =&gt; {
    
  return (
      &lt;Navbar /&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;Router&gt;
            &lt;Routes&gt;
              &lt;Route path='/' element={&lt;About /&gt;} /&gt;
              &lt;Route path='/about' element={&lt;About /&gt;} /&gt;
              &lt;Route path='/artists' element={&lt;Artists /&gt;} /&gt;
              &lt;Route path='/contact' element={&lt;Contact /&gt;} /&gt;
              &lt;Route path='/releases' element={&lt;Releases /&gt;} /&gt;
              &lt;Route path='/release/*' element={&lt;SingleRelease /&gt;} /&gt;
              &lt;Route path='/artist/*' element={&lt;SingleArtist /&gt;} /&gt;
              &lt;Route path=&quot;*&quot; element={&lt;NotFound /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
  
    );
  }
  
  
  export default App
  </code></pre>
  <p>code from Releases.js</p>
  <pre><code>  const Release = () =&gt; {
  
    return (
      &lt;Wrapper&gt;
        &lt;div className=&quot;release&quot;&gt;
          {releases.map((release, i) =&gt; (
            &lt;div className=&quot;item&quot; key={i}&gt;
              &lt;div className=&quot;title&quot;&gt; {release.title}&lt;/div&gt;
              &lt;Link to={`/release/${release.id}`}&gt;
                &lt;img className=&quot;image &quot; src={release.imageURL} alt={release.name} /&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      &lt;/Wrapper&gt;
    )
  }
  
      const Wrapper = styled.div`
        .release {
          display:grid;
          grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
          flex-wrap: wrap;
        }
        .image {
          max-width: 100%;
          height: auto;
      }
      `
      
      export default Release
  </code></pre>
  <p>code from SingleRelease.js</p>
  <pre><code>import React from 'react'
  import { useParams } from 'react-router-dom';
  import Release from '../components/Release';
  import releases from &quot;../data/releases.json&quot;;
  
  function SingleRelease(props) {
  
    const { id } = useParams()
    console.log(id)
  
  
    return (
      &lt;&gt;
        &lt;div&gt;Single Release {id}&lt;/div&gt;
  
      &lt;/&gt;
    )
  }
  
  export default SingleRelease
  </code></pre>
  <p>code from Releases.json (Sample block)</p>
  <pre><code>[
    {
      &quot;id&quot;: 0,
      &quot;imageURL&quot;: &quot;./images/cloudbursts.jpg&quot;,
      &quot;title&quot;: &quot;Cloud Bursts&quot;,
      &quot;artist&quot;: &quot;Eric Shans&quot;,
      &quot;description&quot;: &quot;Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'. It features 2 original tracks with remixes by Primordial Om and Anduaga.&quot;,
      &quot;buy&quot;: &quot;https://www.beatport.com/release/ardour/3096956&quot;,
      &quot;stream&quot;: &quot;https://open.spotify.com/album/5vNYmx4uNY5fIPrOCR0cUa?si=lwCXwLGtSn6g6ZNToPZKRQ&quot;
    },
    {
      &quot;id&quot;: 1,
      &quot;imageURL&quot;: &quot;/images/archtypes.jpg&quot;,
      &quot;title&quot;: &quot;Archetypes&quot;,
      &quot;description&quot;: &quot;Mexico City based artist Eisenheim is back on 3Bridge with a killer EP called 'Archetypes'. It features 2 original tracks with remixes by Primordial Om and Anduaga.&quot;,
      &quot;artist&quot;: &quot;Eric Shans&quot;,
      &quot;buy&quot;: &quot;https://www.beatport.com/release/we-choose/1916121&quot;
    },
  ]
  </code></pre>