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

useParams is generic. You need to tell typescript which params you are using by specifying the value of the generic

There are several ways to solve this

This is my favorite way

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

But there are a few more ways (:

OR

interface ParamTypes {
  sumParams: string;
}

Then in your Component

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

OR

add any type without interface

const { sumParams } : any = useParams();

Note: that this way you will not be able to set it as a string

OR

More option for keemor:

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

Answer 2

Another option is:

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

Answer 3

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

const { sumParams } : any = useParams();

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>>;