TypeScript 從 react-router-dom 升級版本 4 useParams () 后出現錯誤 類型“{}”上不存在屬性“sumParams”

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是通用的。 您需要通過指定泛型的值來告訴打字稿您正在使用哪些參數

有幾種方法可以解決這個問題

這是我最喜歡的方式

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

但是還有更多的方法 (:

或者

interface ParamTypes {
  sumParams: string;
}

然后在你的組件中

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

或者

添加沒有接口的任何類型

const { sumParams } : any = useParams();

注意：這樣你將無法將其設置為字符串

或者

keemor 的更多選擇：

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

Answer 2

另一種選擇是：

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

Answer 3

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

const { sumParams } : any = useParams();

Answer 4

type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

這將是一個干凈的方法

Answer 5

如果您已經在文件中導入了params ，您還可以從useRouteMatch訪問params

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

Answer 6

對於較新版本的路由器，通用從 object 更改為字符串聯合。

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

useParams類型中的當前react-router類型如下所示：

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