title: How can I use React Routes with dynamic params in an onClick event?
body: <p>I found the problem is I need to import something named withRouter, but it's incompatible with React Router v6, so I need to convert the entire router with Navigate but I have no idea how to do it from scratch, I will appreciate a lot if someone can guide me a bit, at least with the dynamic Id part of the routing.</p>
  <p>I'm making a basic Pokedex project with React, I'm following few steps from this   <a href="https://www.youtube.com/watch?v=99m9YosJzi4" rel="nofollow noreferrer">https://www.youtube.com/watch?v=99m9YosJzi4</a>  but looks like some functions that he uses are not currently working. My problem is trying to make an onClick event that gets me to a certain pokemon page using his Id as a parameter. This is the code used in the video:</p>
  <pre><code>const Pokedex = props =&gt; {
    const {history} = props;
    const classes = useStyles();
    const [pokemonData, setPokemonData] = useState(mockData);
  
    const getPokemonCard = (pokemonId) =&gt; {
      console.log(pokemonData[`/${pokemonId}`]);
      const {id, name } = pokemonData[`${pokemonId}`];
      const sprite = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;
      
    return (
      &lt;Grid item xs={4} key={pokemonId}&gt;
        &lt;Card onClick={() =&gt; history.push(`${pokemonId}`)} &gt;
  </code></pre>
  <p>BUT, I had problems when the guide started because I wasn't able to use the &quot;props&quot; values in the Routing, so I used <code>{ useParams }</code> to make it work well, so my Pokemon.jsx looks like this:</p>
  <pre><code>import React from 'react'
  import { useParams } from 'react-router-dom'
  
  const Pokemon = () =&gt; {
    const {pokemonId} = useParams();
    return (
      &lt;div&gt;this is a pokemon with id {pokemonId}&lt;/div&gt;
    );
  };
  
  export default Pokemon;
  </code></pre>
  <p>This is my App.jsx:</p>
  <pre><code>import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
  import React from 'react';
  import Pokedex from './Pokedex';
  import Pokemon from './Pokemon';
  
  function App() {
    return (
      //build routing with params
      &lt;Routes&gt;
        &lt;Route path=&quot;/&quot; element={&lt;Pokedex /&gt;} /&gt;
        &lt;Route path=&quot;/:pokemonId&quot; element={&lt;Pokemon /&gt;} /&gt;
      &lt;/Routes&gt;
    );
  }
  
  export default App
  </code></pre>
  <p>All I need is to make this part of the code work to show something like <em>&quot;this is a pokemon with id {same Id as the link value}&quot;</em> . I already tried to follow steps from documentation but it didn't work and at this point I don't even know what I'm doing wrong, this is literally my first React app.</p>