React Router class tools

Class Component utilities for React Router 6+

Feature

• [x] withRouter() function
• [ ] 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

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

export default withRouter(
    class RoutePage extends PureComponent<
        RouteComponentProps<{ id: string }, {}, { extra: number }>
    > {
        render() {
            const { id } = this.props.match.params,
                { extra } = this.props.query;

            return (
                <ul>
                    <li>ID: {id}</li>
                    <li>extra: {extra}</li>
                </ul>
            );
        }
    }
);

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