ReactComponent 在使用 Route render 时与类型"IntrinsicAttributes & { children？： ReactNode; }" 没有共同的属性

Question

使用时：

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

当提示错误时，在打字脚本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> = () => {...};

游乐场

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;