react-router-dom TypeScript TS2322: Type 'typeof Index' is not assignable to type

Question

Im getting quite a few of the same TypeScritp error in my main React component using react-router-dom. All of the child components are returning errors:

error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'typeof NotFound' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'void | RouteComponentProps<any> | undefined' is not assignable to type '{} | undefined'.
        Type 'void' is not assignable to type '{} | undefined'.


error TS2322: Type 'typeof Index' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'typeof Index' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type 'Index' is not assignable to type 'Component<void | RouteComponentProps<any>, ComponentState>'.
      Types of property 'props' are incompatible.
        Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type '(Readonly<{ children?: ReactNode; }> & void) | (Readonly<{ children?: ReactNode; }> & Readonly<Ro...'.
          Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<any>>'.
            Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type 'Readonly<RouteComponentProps<any>>'.
              Property 'match' is missing in type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>'.

My Main.tsx component looks like this (all other components.tsx seem to compile without issue):

import * as React from 'react';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import Index from './Index';
import Explore from './Explore';
import NotFound from './NotFound';

class Main extends React.Component<{},{}> {

  render () {

    return (
      <Router>
          <Switch>
            <Route path="/" exact={true} component={Index} />
            <Route path="/explore/things/:id" component={Explore} />
            <Route component={NotFound} />
          </Switch>
      </Router>
    )

  }
}

export default Main;

Can anyone provide some clues?

score 12 · Accepted Answer · answered Apr 29 '17 at 02:17

12

This fixes the compile error (but creates a tslint violation)

<Route path="/" exact={true} component={Index as any} /> <Route path="/explore/things/:id" component={Explore as any} />

answered Apr 29 '17 at 02:17

Nicholas Albion

2,549
6
25
51

1

Awesome, thank you! Could you elaborate a bit as to why this is necessary? – Vinnie James May 01 '17 at 22:35
yes , if someone could explain why this fixes the problem? Even I faced the problem, and it was solved following advice by Nicholas Albion – miniGweek Aug 31 '17 at 04:09
if you're using the `component` prop, then your component props just need to inherit `RouteComponentProps`. Don't do this if you can avoid it in any way. – caesay Aug 31 '17 at 05:17
I have been looking for a solution for this for several days. Thank you! – Thorkil Værge Jul 08 '19 at 08:14
I didn't get the linter problem, though, and my linting rules are pretty strict. – Thorkil Værge Jul 08 '19 at 08:41

theZHIR · Answer 2 · 2017-05-12T08:23:53.110

7

I do it like this

import { RouteComponentProps } from 'react-router-dom';

class Index extends React.Component<RouteComponentProps<any>, {}> {...}

or

import { RouteComponentProps } from 'react-router-dom';

interface Props extends RouteComponentProps<any> {...}
class Index extends React.Component<Props, {}> {...}

edited May 12 '17 at 08:23

answered May 02 '17 at 23:23

theZHIR

71
3

Vinnie James · Answer 3 · 2017-05-16T17:21:55.327

This can be solved by invoking the Route component via an arrow function and passing in props: any with a spread:

<Route 
  path="/explore/things/:id"
  component={(props: any)=>
    <Explore {...props} user_role={this.state.user_role} />
  } />

This method is nice because it allows you to pass in additional props, user_role, to the React router child component.

Alternately, changing the @types/react-router-dom definitions seemed to get rid of the error:

interface RouteProps {
    ...
    //component?: React.SFC<RouteComponentProps<any> | void> | React.ComponentClass<RouteComponentProps<any> | void>;
    component?: any;

But this doesnt seem like a great solution.

react-router-dom TypeScript TS2322: Type 'typeof Index' is not assignable to type

3 Answers3