# react-router-v6-class-props

> A package that provides class component support for React Router v6 and enables navigation with additional props. Now You can navigate to other screens with `data` using the `navigate` method.

Latest version **1.2.0** (published 2023-08-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-router-v6-class-props
pnpm add react-router-v6-class-props
yarn add react-router-v6-class-props
bun add react-router-v6-class-props
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-08-23 |
| First published | 2023-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | https://github.com/adityaindiadev |
| Maintainers | adityaindiadev |
| Keywords | react-router-v6, react-router-v6-class, react-router-v6-class-component, react-router-v6-class-props, react-router-v6-class-support, react-router-v6 for class component, react router v6 for class component, react router v6 navigation props, react router v6 for class param |

## Links

- npm: https://www.npmjs.com/package/react-router-v6-class-props
- Repository: https://github.com/adityaindiadev/react-router-v6-class-props
- Homepage: https://github.com/adityaindiadev/react-router-v6-class-props#readme
- Issues: https://github.com/adityaindiadev/react-router-v6-class-props/issues
- npm.io page: https://npm.io/package/react-router-v6-class-props

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.22.10
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.22.10
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.22.10
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.22.5

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2023-08-23
- 1.1.2 — 2023-08-23
- 1.1.1 — 2023-08-23
- 1.1.0 — 2023-08-23
- 1.0.0 — 2023-08-23

## README

# react-router-v6-class-props

A package that provides class component support for React Router v6 and enables navigation with additional props. Now You can navigate to other screens with `data` using the `navigate` method.

## Developed By

`Aditya Gupta`    [LinkedIn](https://www.linkedin.com/in/aditya-gupta-india/)   [GitHub](https://github.com/adityaindiadev)

## Requirement

React Router v6 must be installed.

## Installation

Install the package using npm:

```sh
npm install react-router-v6-class-props
```

## Usage

1. **Import the `withReactRouterProps` HOC:**

   In your component file, import the `withReactRouterProps` higher-order component:

   ```jsx
   import React from 'react';
   import { withReactRouterProps } from 'react-router-v6-class-props';

   class Home extends React.Component {
     // ...
   }

   // Wrap your component using withReactRouterProps
   export default withReactRouterProps(Home);
   ```

2. **Navigate with `Props`:**

   After wrapping your component using withReactRouterProps, you can navigate to other screens with `data` using the `navigate` method:

   ```jsx
   import React from 'react';
   import { withReactRouterProps } from 'react-router-v6-class-props';

   class Home extends React.Component {

        navigateToAbout = () => {

            const data = {
                name: "Aditya",
                address: {
                    city: "Delhi",
                    country: "India"
                }
            };
            // Navigate to the '/about' route with additional data
            this.props.navigate('/about', { state: { ...data } });
        }

        render() {
            // ...
        }
   }
   export default withReactRouterProps(Home);
   ```

3. **Access Navigated Data:**

   In the destination component, you can access the passed data using `this.props.location.state`:

   ```jsx
   import React from 'react';
   import { withReactRouterProps } from 'react-router-v6-class-props';

    class About extends React.Component {
        render() {
            const { state } = this.props.location;

            // Access the data passed from the previous screen
            // Do something with state...

            return (
            // ...
            );
        }
    }
    export default withReactRouterProps(About);

   ```

## License

MIT

---

---
_Source: https://npm.io/package/react-router-v6-class-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._