Typescript throws an explicit function return type error when using Suspense with React Router

Question

I tried using suspense and react router but I can't figure out what it should return and i don't want to disable this rule. Full error message:

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

 import React, { FunctionComponent, lazy, Suspense } from 'react'; import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'; import Loader from '../../Loader'; import Navbar from '../Navbar/Navbar'; const SignUpForm = lazy(() => import('../SignUpForm/SignUpForm')); const Router: FunctionComponent = (): JSX.Element => { return ( <BrowserRouter> <> <Navbar /> <div className="main-container"> <Switch> <Route path="/sign-up" render={props => ( <Suspense fallback={<Loader />}> <SignUpForm {...props} /> </Suspense> )} /> </Switch> </div> </> </BrowserRouter> ); }; export default Router; 

Answer 1

I fixed the problem by passing RouteComponentProps as props type in my SignUpFormComponent.

 import React, { FunctionComponent, useState, SyntheticEvent } from 'react'; import { RouteComponentProps } from 'react-router-dom'; const SignUpForm: FunctionComponent<RouteComponentProps> = (): JSX.Element => { const submitHandler = async (e: SyntheticEvent): Promise<void> => { e.preventDefault(); }; return ( <form onSubmit={submitHandler}> </form> ); }; export default SignUpForm;