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'.
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);