react-router-dom 속성 'sumParams'에서 버전 4 useParams()를 업그레이드한 후 TypeScript 오류가 '{}' 유형에 없음

react-router-dom 속성 'sumParams'에서 버전 4 useParams()를 업그레이드한 후 TypeScript 오류가 '{}' 유형에 없음

버전 4 Used in useParams()로 업그레이드한 후 react-router-dom에서 typeScript 오류가 발생함

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

주의: 이렇게 하면 문자열로 설정할 수 없습니다.

또는

키모어에 대한 기타 옵션:

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

또 다른 옵션은 다음과 같습니다.

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

이전과 같이 작동시키려면 ":any"를 추가합니다.

const { sumParams } : any = useParams();

라우터의 새로운 버전에서는 범용이 오브젝트에서 문자열의 결합으로 변경됩니다.

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

현재의useParams를 입력하다react-router타입은 다음과 같습니다.

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

type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

이 방법을 택하는 것이 깨끗한 방법일 것이다.

또는

const { sumParams } = useParams<{[key: string] : string}>()

이 접근방식을 사용하면 개별적으로 선언하지 않고 원하는 만큼의 파라미터를 얻을 수 있습니다.

에 액세스 할 수도 있습니다.params부터useRouteMatch파일에 이미 Import가 되어 있는 경우

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

언급URL : https://stackoverflow.com/questions/63660520/typescript-error-after-upgrading-version-4-useparams-from-react-router-dom-pr