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;
}
要使它像以前一样运行,只需添加“:any”
const { sumParams } : any = useParams();
type ParamTypes {
sumParams: string;
}
const { sumParams } = useParams<ParamTypes>()
this would be clean approach to take
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
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>>;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.