[英]'react-router-dom' does not contain an export named 'useParams'
[英]TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'
升级到版本 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
是通用的。 您需要通过指定泛型的值来告诉打字稿您正在使用哪些参数
有几种方法可以解决这个问题
这是我最喜欢的方式
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>()
这将是一个干净的方法
如果您已经在文件中导入了params
,您还可以从useRouteMatch
访问params
const curRoute = useRouteMatch();
// @ts-ignore
let sumParams = curRoute.params.sumParams
对于较新版本的路由器,通用从 object 更改为字符串联合。
const { param1, param2 } = useParams<'param1' | 'param2'>();
useParams
类型中的当前react-router
类型如下所示:
export declare function useParams<Key extends string = string>(): Readonly<Params<Key>>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.