I am attempting to use the below useState
hook and pass the associated userAuth
and setUserAuth
down from App.tsx
to a the Login.tsx
child component.
App.tsx
import { lazy, Suspense, useState } from 'react';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import "tailwindcss/tailwind.css";
import * as ROUTES from './constants/routes';
import Login from './screens/Login';
const Home: React.LazyExoticComponent<() => JSX.Element> = lazy(() => import('./screens/Home'));
const App: React.FC = () => {
const [userAuth, setUserAuth] = useState(() => {
const user = localStorage.getItem("userAuth");
return !!user;
});
return (
<div className="App">
<Router>
<Suspense fallback={<p>Loading ...</p>}>
<Switch>
<Route path={ROUTES.HOME} component={Home} exact />
<Route path={ROUTES.LOGIN} component={Login} userAuth={userAuth} setUser={setUserAuth} />
</Switch>
</Suspense>
</Router>
</div>
);
}
export default App;
Login.tsx
interface LoginProps {
userAuth: boolean
setUserAuth: React.Dispatch<React.SetStateAction<boolean>>
};
const Login: React.FC<LoginProps> = ({ userAuth, setUserAuth }) => {
return (
<div className="">
</div>
)
}
export default Login;
I am currently receiving the below error on the userAuth
variable being passed as props to the Login
component via the route component.
No overload matches this call.
Overload 1 of 2, '(props: (RouteProps<"login", {}> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<RouteProps<"login", {}> & OmitNative<...>>): Route<...>', gave the following error.
Type '{ path: "login"; component: FC<LoginProps>; userAuth: boolean; setUser: Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.
Property 'userAuth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.
Overload 2 of 2, '(props: RouteProps<"login", {}> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>, context: any): Route<{}, "login">', gave the following error.
Type '{ path: "login"; component: FC<LoginProps>; userAuth: boolean; setUser: Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.
Property 'userAuth' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "login">> & Readonly<RouteProps<"login", {}> & OmitNative<...>> & Readonly<...>'.ts(2769)
I'm struggling to pick apart what is causing this error and would appreciate any help.
Solved this by amending how the routes were set up on App.tsx
from:
<Route path={ROUTES.LOGIN} component={Login} userAuth={userAuth} setUserAuth={setUserAuth} />
and changing it to:
<Route path={ROUTES.LOGIN}>
<Login userAuth={userAuth} setUserAuth={setUserAuth} />
</Route>
I'm not sure why this works, but it has removed the TypeScript error.
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.