React 使用 TypeScript 和 React Router 将道具传递给子组件

Question

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.

Answer 1

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.