ReactComponent has no properties in common with type 'IntrinsicAttributes & { children?: ReactNode; }' when using Route render

user_1613047 0
Viewed 6456

When using:

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

in typescript LoginLayout when prompts an error:

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)

I tried to add:

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

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

But it doesn't work. I also tried:

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

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

And it doesn't work...

react-router typescript reactjs
2 Answers

It complains because you're passing props (RouteComponentProps) to component which doesn't expect to get them. To fix:

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

Or even shorter:

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

Playground

user_11130020

Extend 'RouterComponentProps' from 'react-router- and then use it in your functional component 

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

type Props = { component: FunctionComponent } & RouteComponentProps;

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

export default LoginLayout;
user_69277480
Related