I need your help. Started learning Typescript recently and got one problem with React. I try to wrap my Router with React.memo(). Smth like this:
export const Router = React.memo<RouterPropsInterface>(({ isAuth }) => {
if (!isAuth) {
return (
<Suspense fallback={<Loader text={""}/>}>
<Routes>
<Route path={'/'} element={<LoginPage/>}/>
<Route path={'*'} element={<LoginPage/>}/>
<Route path={'register'} element={<RegisterPage/>}/>
</Routes>
</Suspense>
)
}
return (
<Suspense fallback={<Loader text={""}/>}>
<Routes>
<Route path={'create'} element={<AddCard/>}/>
<Route path={'posts'} element={<UsersList/>}/>
<Route path={'/'} element={<Home/>}/>
<Route path={"*"} element={<Home/>}/>
</Routes>
</Suspense>
)
});
My RouterPropsInterface
looks like this:
export interface RouterPropsInterface {
isAuth: boolean,
}
But in that case, I have other problems:
src/routers/Router.tsx
Line 12:23: Component definition is missing display name react/display-name
Line 12:59: 'isAuth' is missing in props validation react/prop-types
"react": "^17.0.2", "typescript": "^4.6.2"
I don't want to add eslint-disablers, just wanna understand what I'm doing wrong.
Thanks!
When wrapping a component with React.memo
, the displayName
property is no longer inferred by React. So, you need to set it like so.
export const Router = React.memo(({ isAuth }) => {...}
Router.displayName = "Router"
Regarding prop types, you can satisfy this by adding prop types like so:
export const Router = React.memo(({ isAuth }: {isAuth: RouterPropsInterface }) => {...}
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.