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 元素）。