Есть компоненты, которая проверяет авторизован ли юзер. На js она работает нормально, но на ts выдает ошибку: 'OnlyAuthComponent' cannot be used as a JSX component.
Its return type 'string | number | boolean | ReactFragment | Element | null | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.
Я недавно только начал писать на ts и не могу понять почему так происходит.
Вот код компоненты:
interface OnlyAuthComponentProps {
isAuth: boolean;
children: React.ReactNode
}
function OnlyAuthComponent ({children, isAuth}: OnlyAuthComponentProps) {
return isAuth ? children : <React.Fragment><Navigate to={"/auth/login"} /></React.Fragment>;
};
export default OnlyAuthComponent;
Код app.tsx
<Route path='profile' element={<OnlyAuthComponent isAuth={props.isAuth} children={<ProfileContainer />} />}>
<Route path='home' element={<ProfileMain />}/>
<Route path='favorite' element={<ProfileFavorite />}/>
</Route>