在使用路径渲染时，ReactComponent没有与类型'IntrinsicAttributes &{IntrinsicAttributes？：ReactNode；}‘相同的属性

Question

使用时：

<Route path={rootPath} exact render={props => <LoginLayout {...props} />} />

在typescript LoginLayout中提示错误时：

Type '{ history: History<PoorMansUnknown>; location: Location<PoorMansUnknown>; match: match<any>; staticContext?: StaticContext | undefined; }' has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2559)

我试着补充说：

const LoginLayout:FunctionComponent = (props: any) => { ... };

<Route path={rootPath} exact render={(props: any) => <LoginLayout {...props} />} />

但它不起作用。我也试过了：

const LoginLayout:FunctionComponent = (props: RouteComponentProps) => { ... };

<Route path={rootPath} exact render={(props: RouteComponentProps) => <LoginLayout {...props} />} />

它不起作用..。

Answer 1

它抱怨是因为你正在将属性(RouteComponentProps)传递给组件，而组件并不期望得到它们。要修复，请执行以下操作：

const LoginLayout: FunctionComponent<RouteComponentProps> = () => {...};

或者甚至更短：

const LoginLayout: FC<RouteComponentProps> = () => {...};

Playground

Answer 2

从‘react-router’扩展'RouterComponentProps‘，然后在你的功能组件中使用它

import React, { FunctionComponent } from "react";
import { RouteComponentProps } from "react-router";

type Props = { component: FunctionComponent } & RouteComponentProps;

const LoginLayout: FunctionComponent<Props> = () => {...};

export default LoginLayout;