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
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;
}
Another option is:
const { sumParams } = useParams() as {
sumParams: string;
}
To make it function as before, just add ":any"
const { sumParams } : any = useParams();