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

Question

升级到版本 4 后出现 typeScript 错误在useParams()中使用from react-router-dom

"typescript": "^4.0.2"

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

const { sumParams } = useParams();

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

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

Answer 1

useParams 是通用的。您需要通过指定 generic

的值来告诉打字稿您正在使用哪些参数

有几种方法可以解决这个问题

这是我最喜欢的方式

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

不过还有几个方法(:

或

interface ParamTypes {
  sumParams: string;
}

然后在你的组件中

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

或

添加任何没有接口的类型

const { sumParams } : any = useParams();

注意：这样你将无法将其设置为字符串

或

的更多选项：

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

Answer 2

要使其像以前一样运行，只需添加“:any”

const { sumParams } : any = useParams();

Answer 3

另一种选择是：

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

Answer 4

type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

这将是一种干净的方法

Answer 5

如果您已经将 params 导入到您的文件中，您也可以从 useRouteMatch 访问它

const curRoute = useRouteMatch();
// @ts-ignore
let sumParams  = curRoute.params.sumParams

Answer 6

对于较新版本的路由器，泛型从对象更改为字符串并集。

const { param1, param2 } = useParams<'param1' | 'param2'>();

react-router 类型中的当前 useParams 类型如下所示：

export declare function useParams<Key extends string = string>(): Readonly<Params<Key>>;

TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'