React Router class tools

Class Component utilities for [React Router][1] 6+

![CI & CD][2]

![NPM][3]

![Demo][4]

Preview

https://idea2app.github.io/React-Router-class-tools/preview/

Feature

- [x] withRouter() function
- [x] withRouter() decorator
- [x] RouteComponentProps
- [ ] this.props.history
- [x] this.props.location
- [x] this.props.match
- [ ] Static Context
- [x] this.props.query: the missing Query object

Usage

``tsx
import { PureComponent } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-class-tools';

type RoutePageProps = RouteComponentProps<
{ id: string },
{},
{ extra: number }
>;

@withRouter
export class RoutePage extends PureComponent {
render() {
const { id } = this.props.match.params,
{ extra } = this.props.query;

return (


• ID: {id}


• extra: {extra}


);
}
}
``

Reference

1. https://github.com/remix-run/react-router/issues/8146
2. https://segmentfault.com/a/1190000041700003

User case

1. https://github.com/idea2app/React-MobX-Bootstrap-ts
2. https://github.com/idea2app/React-MobX-Ant-Design-ts

[1]: https://reactrouter.com/
[2]: https://github.com/idea2app/React-Router-class-tools/actions/workflows/main.yml
[3]: https://nodei.co/npm/react-router-class-tools/
[4]: https://codesandbox.io/s/react-class-router-1y99mv