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

问题描述

升级到版本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 '{}'. 

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

解决方法

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

有几种解决方法

这是我最喜欢的方式

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

但是还有其他几种方法（：

OR

interface ParamTypes {
  sumParams: string;
}

然后在您的组件中

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

OR

添加任何没有接口的类型

const { sumParams } : any = useParams();

注意：这样一来，您将无法将其设置为字符串

OR

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

这将是一个干净的方法