React Router class tools

Class Component utilities for React Router 6+

Preview

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

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

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

@withRouter
export class RoutePage extends PureComponent<RoutePageProps> {
    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