Cannot determine how to use Redux and React-router on the same component

Question

I am starting to learn typescript and the is a behaviour that I don't understand.

I got this error:

Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type '{}' is not assignable to type 'void | RouteComponentProps<any>'.
      Type '{}' is not assignable to type 'RouteComponentProps<any>'.

Here is my App component :

interface AppProps extends React.Props<void> {
  todos: TodoItemData[];
  actions: typeof TodoActions;
};

interface AppState {
  /* empty */
}

class App extends React.Component<AppProps, AppState>{
  render() {return (<div></div>);
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

If I change in the declaration of my App component AppProps by void or React.Props I got no errors but I always have one with AppProps.

I don't understang why it's not working, AppProps is extending from React.Props. Did you see the mistake ?

Answer 1

I ran into a similar problem with [email protected].

I fixed it by extending my AppProps interface with RouteComponentProps interface, so in your case the AppProps interface would look like this:

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

interface AppProps extends RouteComponentProps<any> {
  todos: TodoItemData[];
  actions: typeof TodoActions;
}