Reactjs – React Router – Typescript errors on withRouter after updating version

react-routerreactjstypescript

I just tried to upgrade my React app to

react-router – 4.0.19 to 4.0.20

react- 16.0.30 to 16.0.34

typescript- version "2.7.0-insiders.20180108"

In my app, wherever I am using 'withRouter', I now get cryptic Typescript errors. I even replaced all interface props with 'any' just to try to make it work.

import * as React from 'react';
import { Switch, Route, withRouter} from 'react-router-dom';
import { Login } from './Login';
import { connect } from 'react-redux';
import { RootAction, RootState } from './_redux';

class MainForm extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }

  render() {

    return (
      <Switch>
        <Route exact={true} path="/" component={Login}/>
        <Route  path="/accounts" component={AccountsView}/>
      </Switch> 
    );
  }
}

const mapStateToProps = (state: RootState) => ({
  state
});

export const Main = withRouter(connect(mapStateToProps)(MainForm);

error TS2345: Argument of type 'ComponentClass> & {
WrappedComponent: ComponentType; }' is not assignable to
parameter of type 'ComponentType>'. Type
'ComponentClass> & { WrappedComponent:
ComponentType; }' is not assignable to type
'StatelessComponent>'.
Type 'ComponentClass> & { WrappedComponent: ComponentType; }' provides no match for the signature '(props:
RouteComponentProps & { children?: ReactNode; }, context?: any):
ReactElement | null'.

If i convert the last line to this :

export const Main = connect(mapStateToProps)(MainForm);

I don't get errors. seriously frustrated here.
Thanks

EDIT, I changed to 

export const Main = connect(mapStateToProps)(withRouter(MainForm));

like suggested by Mayank Shukla. but now get the error:

error TS2345: Argument of type 'ComponentClass>' is
not assignable to parameter of type 'ComponentType<{ state: RootState;
} & DispatchProp>'. Type 'ComponentClass>' is
not assignable to type 'StatelessComponent<{ state: RootState; } &
DispatchProp>'.
Type 'ComponentClass>' provides no match for the signature '(props: { state: RootState; } & DispatchProp & {
children?: ReactNode; }, context?: any): ReactElement | null'.

Best Answer

I just upgraded to TypeScript 2.6 and got same issue.

I managed to resolve it by using RouteComponentProps.

For URL http://localhost:8080/your-component/abc and route

<Route component={YourComponent} path="/your-component/:param1?" />

Component should look like this:

import * as React from 'react'
import { withRouter } from 'react-router-dom';
import {RouteComponentProps} from "react-router";

// Type whatever you expect in 'this.props.match.params.*'
type PathParamsType = {
    param1: string,
}

// Your component own properties
type PropsType = RouteComponentProps<PathParamsType> & {
    someString: string,
}

class YourComponent extends React.Component<PropsType> {
    render() {

        console.log(this.props); // Prints all props including routing-related
        console.log(this.props.match.params.param1); // Prints 'abc'
        console.log(typeof this.props.match.params.param1 === 'string'); // prints 'true'

        return <div>...</div>;
    }
}

export default withRouter(YourComponent);
Related Topic