72

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

6 Answers 6

185

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;
}
3
  • 2
    do you know what changed between TS versions to cause this to become an error? I couldn't find anything in the change log that suggested this would change.
    – mtoor
    Sep 26, 2020 at 0:30
  • 2
    Update: I did a binary search through typescript versions on npm, and this started becoming an issue between version 4.0.0-dev.20200624 and 4.0.0-dev.20200625. You can check out the differences between those versions here: diff.intrinsic.com/typescript/4.0.0-dev.20200624/…
    – mtoor
    Sep 26, 2020 at 1:36
  • Thanks, this is what I did: const { sumParams } : any = useParams(); Still getting used to typescript, so far, I am just not seeing the advantage of forgoing an elegant, dynamic language like JS in favor of the convoluted TS, but maybe I will get it one day...
    – Hank
    May 31, 2021 at 21:53
15

Another option is:

const { sumParams } = useParams() as { 
  sumParams: string;
}
2
  • 1
    hi @keemor I gave you a vote and also quoted you in my answer
    – Yoel
    Sep 23, 2020 at 14:09
  • It is not good since you simply force a type assertion. Use generic approach of useParams<TS type here>() function. It will allow the TS compiler infer your type on the left-side.
    – hastrb
    Jul 4, 2022 at 6:26
6

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

const { sumParams } : any = useParams();
2

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>>;
1
type ParamTypes {
  sumParams: string;
}

const { sumParams } = useParams<ParamTypes>()

this would be the clean approach to take

or

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

with this approach, you can get as many as param you want without declaring individually

1
  • 1
    This is already the second suggestion in the accepted answer.
    – MEMark
    Sep 20, 2021 at 22:56
-2

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
1
  • useRouteMatch will match the query parameters followed by the target path param, not recommend using this way.
    – Kaiwen Luo
    Nov 1, 2022 at 0:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.