How can I use React Routes with dynamic params in an onClick event?-CodePudding

I'm making a basic Pokedex project with React, I'm following few steps from this https://www.youtube.com/watch?v=99m9YosJzi4 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:

const Pokedex= props => {

  const {history} = props;
  const classes = useStyles();
  const [pokemonData, setPokemonData] = useState(mockData);


  const getPokemonCard = (pokemonId) => {
    console.log(pokemonData[`/${pokemonId}`]);
    const {id, name } = pokemonData[`${pokemonId}`];
    const sprite = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`;


    
    return (
    <Grid item xs={4} key={pokemonId}>
      <Card onClick={() => history.push(`${pokemonId}`)} >

BUT, I had problems when the guide started because I wasn't able to use the "props" values in the Routing, so I used {useParams} to make it work well, so my Pokemon.jsx looks like this:

import React from 'react'
import {useParams} from 'react-router-dom'




const Pokemon = () => {
  const {pokemonId} = useParams();
  return (
    <div>this is a pokemon with id {pokemonId}</div>
  );
};






export default Pokemon;

This is my App.jsx:

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
    <Routes>
      <Route path="/" element={<Pokedex />} />
    

      <Route path="/:pokemonId" element={<Pokemon />} />

    </Routes>
  );


}

export default App

All I need is to make this part of the code work to show something like "this is a pokemon with id {same Id as the link value}" . 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.

thanks in advance

CodePudding user response：

can you please also paste your App.js just to check your routes. If path to render Pokemon component is /:pokemonId, you should do () => history.push(`/${pokemonId}`)} on click. / before pokemon id is missing in above code.

CodePudding user response：

Solution 1:

import React from 'react'
import {useParams} from 'react-router-dom'

const Pokemon = () => {
  const {pokemonId} = useParams();
  return (
    <div>{`this is a pokemon with id ${pokemonId}`}</div>
  );
};

export default Pokemon;

Solution 2: Try using match.params

import React from 'react'

const Pokemon = ({ match }) => {
  const {pokemonId} = match.params;
  return (
    <div>{`this is a pokemon with id ${pokemonId}`}</div>
  );
};


export default Pokemon;