React Router class tools

Class Component utilities for React Router 6+

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

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>
        );
    }
}
Copy

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