IT技术 - 从 react-router-dom 属性 'sumParams' 升级版本 4 useParams () 后 TypeScript 错误在类型 '{}' 上不存在 - 吾爱随笔录

IT技术 javascript reactjs typescript react-router-dom react-dom

2021-05-04 08:00:12

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

"typescript": "^4.0.2"

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

const { sumParams } = useParams();

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

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

4个回答

useParams是通用的。您需要通过指定泛型的值来告诉typescript您正在使用哪些参数

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

这是我最喜欢的方式

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

但是还有更多的方法 (:

或者

interface ParamTypes {
  sumParams: string;
}

然后在你的组件中

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

或者

添加没有接口的任意类型

const { sumParams } : any = useParams();

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

或者

keemor 的更多选择：

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

另一种选择是：

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

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

const { sumParams } : any = useParams();

type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

这将是一个干净的方法

其它你可能感兴趣的问题