javascript - 从 react-router-dom 属性 'sumParams' 升级版本 4 useParams () 后 TypeScript 错误在类型 '{}' 上不存在

Question

升级到版本 4 后出现 typeScript 错误
在 react-router-dom 的 useParams() 中使用"typescript": "^4.0.2"

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

const { sumParams } = useParams();

Property 'sumParams' does not exist on type '{}'. 

该项目运行良好，只有在升级后才会抛出错误

Answer 1

useParams是通用的。您需要通过指定泛型的值来告诉 typescript 您正在使用哪些参数
有几种方法可以解决这个问题
这是我最喜欢的方式

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

但是还有更多方法(:
或者

interface ParamTypes {
  sumParams: string;
}

然后在你的组件中

const { sumParams } = useParams<ParamTypes>();

或者
添加任何没有接口(interface)的类型

const { sumParams } : any = useParams();

注意:这样您将无法将其设置为字符串
或者
keemor 的更多选项:

const { sumParams } = useParams() as { 
  sumParams: string;
}