ReactJSA Typescript 路由 JSX 元素不接受

Question

大家好，我是 ReactJS/Typescript 的新手，需要一些有關以下行為的提示。 我想使用以下代碼限制對 Dashboard 組件的訪問：

const DashBoard = () => {
    return (
        <h1> DashBoard </h1 >
    )
}
export default DashBoard;

通過在其他組件 NavBar 中使用來保護到 DashBoard 組件的路由：

....
<PrivateRoute path="/dashboard" component={DashBoard} exact isAuth={true} />
...

下面是私有路由：

import React from "react";
import { Route, Redirect } from "react-router-dom";

interface PrivateRouteProps {
    path: string;
    exact: boolean;
    component: JSX.Element; //using component: React.FC works
    isAuth: boolean;
}
const PrivateRoute = (props: PrivateRouteProps) => {

    return props.isAuth ? (<Route path={props.path} exact={props.exact} component={props.component} />) :
        (<Redirect to="/login" />);
};
export default PrivateRoute;

但是，我收到以下錯誤：

Type '() => Element' is missing the following properties from type 'ReactElement<any, any>': type, props, key

我的問題：

使用“component: React.FC”或“component: any”會得到上面的錯誤消失但是這是安全的因為我在所有組件中返回 JSX.Element 按照https://github.com/typescript-cheatsheets/react

謝謝

Answer 1

Using component: React.FC 確實是正確的做法。

這將處理您的泛型類型、默認道具類型（如子項）和組件函數的返回類型（如 JSX 元素）。