TypeScript React功能组件-类型“Element”缺少以下属性：类型、道具、键错误

Question

我有以下定义：

伊鲁特：

export interface IRoute{
    key: string, 
    path: string,
    exact: boolean,
    component: JSX.Element,
    private?: boolean
}

IRoutesConfig：

import { IRoute } from "./IRoute";

export default interface IRoutesConfig {
    [key : string] : [IRoute]
}

以及我的路由配置，然后将其传递给类以进一步增强

import Login from "../container/Auth/Login/Login";
import IRoutesConfig from "./IRoutesConfig";

const Routes : IRoutesConfig = {
    "Auth": [
        {
            key: "login-page",
            exact: true, 
            component: Login,
            path: "/auth/login"
        }
    ]
}

export default Routes;

我正在测试登录功能组件：

import React, { FC, ReactElement } from 'react';

type LoginProps = {

}

const Login : FC<LoginProps> = (props) : ReactElement => {
  return (
    <>
    
    </>
  );
}

export default Login;

这是一个新的项目设置，还没有为登录道具定义任何内容。因此，它当前为空，稍后将进行扩展，内容也是如此，因为我们目前正在设置routes体系结构。

VSCode在Routes： IRoutesConfig中的"组件"上给了我以下提示：

我当然不是声明类型、道具和钥匙。

最后，路由配置将被提供给RouteManager，它将动态地为'React-Rout-Dom'的Switch创建Routes，以及其他一些东西，这取决于我访问它的位置。

它将创建路线图，例如：

<Route key="login-page" path="/auth/login" component={Login} />

然后用于反应容器组件：

...

let authRoutes = RoutesManager.getAllRoutes("Auth");

return (
    <Switch>
      {authRoutes}
      <Redirect key="account-redirect" to="/account" />
    </Switch>
  );

问：根据我的理解，react-router-dom路由期望在它的arg组件中包含一个JSX。元素，但是我的登录功能组件的返回类型是ReactElement。就我所理解的而言，JSX。元素是这个上下文中的通用ReactElement。登录FC将有孩子。

如何解决将登录FC正确地传递给配置的问题，以供react路由器dom的路由组件稍后使用？

Answer 1

正如我所理解的，错误来自组件： JSX. Element。您正试图通过向Road添加一个私有属性来创建受保护的路由。您可以更改您的IRoute接口来扩展react-router定义的类型，这样您就不会再遇到这个问题了。

首先：添加这个导入语句。

import { RouteProps } from "react-router-dom";

第二：将您的IRoute接口更改为：

export interface IRoute extends RouteProps{
    private?: boolean
}

这样，你只是告诉我的IRoute有所有简单的路由属性加上私有。