https://github.com/idea2app/react-router-class-tools

Class Component utilities for React Router 6+, which rolls back the Class supports dropped by official team.
https://github.com/idea2app/react-router-class-tools

class component react router tool utility

Last synced: about 1 month ago
JSON representation

Class Component utilities for React Router 6+, which rolls back the Class supports dropped by official team.

• Host: GitHub
• URL: https://github.com/idea2app/react-router-class-tools
• Owner: idea2app
• Created: 2022-04-14T11:27:31.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-06-03T07:24:49.000Z (over 1 year ago)
• Last Synced: 2024-10-31T17:15:47.641Z (2 months ago)
• Topics: class, component, react, router, tool, utility
• Language: TypeScript
• Homepage: http://ideapp.dev/React-Router-class-tools/
• Size: 84 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: ReadMe.md

Awesome Lists containing this project

README

        
# React Router class tools

**Class Component** utilities for [React Router][1] 6+

[![CI & CD](https://github.com/idea2app/React-Router-class-tools/actions/workflows/main.yml/badge.svg)][2]

[![NPM](https://nodei.co/npm/react-router-class-tools.png?downloads=true&downloadRank=true&stars=true)][3]

[![Demo](https://codesandbox.io/static/img/play-codesandbox.svg)][4]

## 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

```tsx

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 (

                


                    
ID: {id}

                    
extra: {extra}

                

            );

        }

    }

);

```


## 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

[1]: https://reactrouter.com/

[2]: https://github.com/idea2app/React-Router-class-tools/actions/workflows/main.yml

[3]: https://nodei.co/npm/react-router-class-tools/

[4]: https://codesandbox.io/s/react-class-router-1y99mv