TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'

Question

I get a typeScript error after upgrading to version 4 Used in useParams () from react-router-dom

"typescript": "^4.0.2"

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

const { sumParams } = useParams();

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

The project worked great and only after the upgrade does it throw an error

Answer 1

Another option is:

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

Answer 2

To make it function as before, just add ":any"

const { sumParams } : any = useParams();

Answer 3

type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

this would be clean approach to take

Answer 4

For newer versions of the router, generic is changed from object to union of strings.

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

Current useParams type in the react-router types looks like this:

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

Answer 5

You can also access the params from useRouteMatch if you already have it imported in your file

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