12

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?

3 Answers 3

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} />

6
  • 1
    Awesome, thank you! Could you elaborate a bit as to why this is necessary? Commented May 1, 2017 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
    Commented Aug 31, 2017 at 4: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
    Commented Aug 31, 2017 at 5:17
  • I have been looking for a solution for this for several days. Thank you! Commented Jul 8, 2019 at 8:14
  • I didn't get the linter problem, though, and my linting rules are pretty strict. Commented Jul 8, 2019 at 8:41
8

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, {}> {...}
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.