React router:useParams()返回undefined，即使在已销毁时也是如此

Question

我在react中使用useParams钩子。我有一个组件，我想从URL加载ID。

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

useParams((控制台日志显示了我想要在对象中的数据，但对其进行销毁会返回未定义的数据。我在应用程序中有一级以上的路线：

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

这里的游戏组件中的FakeGame组件链接：

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

我说得对吗？

我的文件结构是

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

Answer 1

在这一行中，您将参数的名称声明为"id"：

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

因此，对于"0"，析构函数返回undefined；thisId"；因为没有匹配的属性。要么将上面的行改为。。path=/:thisId。。(不推荐(或将thisId更改为id。还要对破坏进行一些解读