React Router class tools
React Router class tools
Class Component utilities for React Router 6+
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>
);
}
}
);