type error in react-router-dom and react with typescript

Question

I am a beginner in react with typescript, facing issue in following code

Here is the code of dashboard component

export default function Dashboard() {
return(
  <p>Dashboard page</p>
 )
 }

Here is code of route

const AppRouter = () => {
  return (
    <Router history={history}>
      <div>
        <Switch>
          <Route path={"/dashboard" } component={Dashboard} />

          <Route path="/" component={Login} />
        </Switch>
      </div>
    </Router>
  );
};

export default AppRouter;

In route code I am facing type issue i.e.

TypeScript error in E:/Web/src/router/route.tsx(18,51):

No overload matches this call.

Overload 1 of 2, '(props: Readonly): Route', gave the following error. Type '{ Dashboard: string; }' is not assignable to type 'ComponentClass | FunctionComponent | ComponentClass, any> | FunctionComponent<...> | undefined'.

Type '{ Dashboard: string; }' is not assignable to type 'FunctionComponent>'. Type '{ Dashboard: string; }' provides no match for the signature '(props: PropsWithChildren>, context?: any): ReactElement<...> | null'.

Overload 2 of 2, '(props: RouteProps, context?: any): Route', gave the following error. Type '{ Dashboard: string; }' is not assignable to type 'ComponentClass |FunctionComponent | ComponentClass, any> | FunctionComponent<...> | undefined'.

Type '{ Dashboard: string; }' is not assignable to type 'FunctionComponent>'. TS2769

16 |       <div>
17 |         <Switch>

18 | | ^ "

Shane Creedon Shane Creedon · Accepted Answer · 2020-04-11T10:29:24

It seems that you haven't given your components a type (dashboard and login).

You need to do something similar to the below component declaration image, where by you set the type of your component as React.FC after importing the React library. (The FC standing for Functional Component, since we are not using a class-based component model)

type error in react-router-dom and react with typescript

1 Answers

Component Image