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

Question

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...

Aleksey L. · Accepted Answer · 2020-03-11 08:27:05Z

4

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

answered Mar 11, 2020 at 8:27

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joy08 · Accepted Answer · 2020-03-11 08:49:25Z

1

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;

answered Mar 11, 2020 at 8:49

joy08

9,6729 gold badges43 silver badges81 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related