React Router class tools

Class Component utilities for React Router 6+

CI & CD

NPM

Demo

Feature

  • withRouter() function
  • withRouter() decorator
  • RouteComponentProps
  • this.props.history
  • this.props.location
  • this.props.match
  • Static Context
  • 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. remix-run/react-router#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

GitHub

View Github