Estoy usando el gancho useParams en reaccionar. Tengo un componente donde quiero cargar la ID desde la URL.

 import React from 'react'; import { useParams } from 'react-router-dom' const FakeGame = () => { let { thisId } = useParams(); console.log(thisId); console.log(useParams()); return ( <h1>This ID is: {thisId}</h1> ) } export default FakeGame

el registro de la consola useParams() muestra los datos que quiero en un objeto, pero la desestructuración devuelve indefinidos. Tengo las rutas un nivel más arriba en la App:

 <Link to="/">Home</Link> <Routes> <Route path="/:id" element={<FakeGame currentId={currentId}/>}></Route> <Route path="/" element={<Home currentId={currentId} setCurrentId={setCurrentId}/>} /> </Routes>

Y el enlace al componente FakeGame en un componente de juegos aquí:

 const Games = ({ setCurrentId }) => { const games = useSelector((state) => state.games); return ( !games.length ? <CircularProgress /> : ( <Grid className={mergeClasses.container} container alignItems="stretch" spacing={3}> {games.map((game) => ( <Grid key={game._id} item xs={12} sm={6}> <Link to={`/${game._id}`}>FAKE GAME</Link> <Game game={game} setCurrentId={setCurrentId}/> </Grid> ))} </Grid> ) ) }

¿Estoy haciendo esto correctamente?

Mi estructura de archivos es

 - App.js + components - FakeGame.js + Games - Games.js