在 TypeScript 中反应路由器访问参数

Question

我正在尝试在 React 项目中学习使用 TypeScript，但在使用 React Router useParams() 时遇到了问题。

我是这样导入的：

import { useParams } from 'react-router-dom'; // import useParams

我曾经在 JavaScript 中像这样访问特定的 url 参数：

const params = useParams();
console.log(params.gameId); // trying to access parameter gameId 

但现在使用 TypeScript 我收到错误消息：属性 'gameId' 不存在于类型 '{}'。

错误消息可能看起来很明显，但我无法立即找到解决方案，我应该访问另一个属性还是我已经做错了什么？

Answer 1

添加正确的类型：

const params = useParams<{ gameId: string }>();

Answer 2

使用泛型：

interface IParams {
  gameId: string
}
const params = useParams<IParams>();

或

const params = useParams<{ gameId: string }>();