React router: useParams() returns undefined even when destructured-CodePudding

I am using the useParams hook in react. I have a component where I want to load the ID from 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

the useParams() console log shows the data I want in an object, but destructuring it returns undefined. I have the routes one level up in the App:

  <Link to="/">Home</Link>

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

And the Link to the FakeGame component in a Games component here:

  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>
    )
  )
}

Am I going about this correctly?

My file structure is

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

CodePudding user response：

In this line you're declaring the name of the parameter to be "id":

<Route path="/:id" element={<FakeGame currentId={currentId}/>}></Route>

Therefore, the destructuring returns undefined for "thisId" since there is no matching property. Either change the above line to be ..path=/:thisId.. (not recommended) or change thisId to id. Also do some reading into destructuring