typed-typings/npm-react-router

Using withRouter

mayerwin opened this issue · 2 comments

Are we supposed to use withRouter (recommended with version 2.4+) with TypeScript? If so, how?

It doesn't seem anyone is actively maintaining this repo right now. If you're interested and you'd like to help out, I can add you as a maintainer. And/or someone from @types can add an additional comment and/or help you.

I've found a way to solve this problem as you can see below:

type OwnProps = RouteComponentProps<{id: number}>;

const mapStateToProps = (state: GlobalStateType, ownProps: OwnProps): StateToPropsType => ({
        id: ownProps.match.params.id
});

type PropsType = StateToPropsType & DispathToPropsType & OwnProps;

class MyPage extends React.Component<PropsType, StateType> {
   ...
}

const mapDispatchToProps = (dispatch: DispatchType): DispathToPropsType => ({
    ...
});

export default withRouter(connect<StateToPropsType, DispathToPropsType, OwnProps> (
    mapStateToProps,
    mapDispatchToProps
)(MyPage));

In router:

<Provider store={store}>
   <BrowserRouter>
      <Switch>
         <Route path="/:id(\d+)" component={MyPage} />
      <Switch>
  <BrowserRouter>
</Provider>