React 使用 TypeScript 和 React Router 將道具傳遞給子組件

Question

我正在嘗試使用下面的useState鈎子並將關聯的userAuth和setUserAuth從App.tsx到Login.tsx子組件。

應用程序.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;

登錄.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;

我目前在通過路由組件作為道具傳遞給Login組件的userAuth變量上收到以下錯誤。

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)

我正在努力找出導致此錯誤的原因，並希望得到任何幫助。

Answer 1

通過修改App.tsx上的路由設置方式解決了這個問題：

<Route path={ROUTES.LOGIN} component={Login} userAuth={userAuth} setUserAuth={setUserAuth} />

並將其更改為：

<Route path={ROUTES.LOGIN}>
  <Login userAuth={userAuth} setUserAuth={setUserAuth} />
</Route>

我不確定為什么會這樣，但它已經消除了 TypeScript 錯誤。