# use-react-router

> React Hook for pub-sub behavior using React Router.

Latest version **1.0.7** (published 2019-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-react-router
pnpm add use-react-router
yarn add use-react-router
bun add use-react-router
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2019-05-26 |
| First published | 2018-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 563 |
| Author | Charles Stover |
| Maintainers | charlesstover |

## Links

- npm: https://www.npmjs.com/package/use-react-router
- Repository: https://github.com/CharlesStover/use-react-router
- Homepage: https://github.com/CharlesStover/use-react-router#readme
- Issues: https://github.com/CharlesStover/use-react-router/issues
- npm.io page: https://npm.io/package/use-react-router

## Dependencies (1)

- [use-force-update](https://npm.io/package/use-force-update.md) ^1.0.5

## Recent versions

- 1.0.7 (latest) — 2019-05-26
- 1.0.6 — 2019-05-10
- 1.0.5 — 2019-03-20
- 1.0.4 — 2019-03-11
- 1.0.3 — 2018-12-26
- 1.0.2 — 2018-11-15
- 1.0.1 — 2018-11-14
- 1.0.0 — 2018-10-26

## README

# useReactRouter [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Want%20to%20use%20react-router%20with%20Hooks?%20Now%20you%20can%20with%20use-react-router!&url=https://github.com/CharlesStover/use-react-router&via=CharlesStover&hashtags=react,reactjs,javascript,typescript,webdev,webdeveloper,webdevelopment) [![version](https://img.shields.io/npm/v/use-react-router.svg)](https://www.npmjs.com/package/use-react-router) [![minzipped size](https://img.shields.io/bundlephobia/minzip/use-react-router.svg)](https://www.npmjs.com/package/use-react-router) [![downloads](https://img.shields.io/npm/dt/use-react-router.svg)](https://www.npmjs.com/package/use-react-router) [![build](https://api.travis-ci.com/CharlesStover/use-react-router.svg)](https://travis-ci.com/CharlesStover/use-react-router/)

`useReactRouter` is a React Hook that provides pub-sub behavior for `react-router`.
Unlike the `withRouter` Higher-Order Component, `useReactRouter` will re-render your component when the location changes!

`useReactRouter()` returns an object that contains the `history`, `location`, and `match` properties that would be passed as props by the HOC.

A tutorial covering the design and development of this package can be found on Medium: [How to Convert withRouter to a React Hook](https://medium.com/@Charles_Stover/how-to-convert-withrouter-to-a-react-hook-19bb02a29ed6).

## Why Pub-Sub?

Pub-sub behavior is a common request (that's commonly rejected) for the `react-router` package.

For users who adamently prefer pub-sub behavior over `react-router`'s suggested alternatives, this package offers a solution.

A non-pub-sub React Hook is anticipated to eventually be included in the `react-router` package itself.

## Install

**You must be using `react-router` and `react-router-dom` v5.0.0 or greater.**

* `npm install use-react-router` or
* `yarn add use-react-router`

## Use

Import `useReactRouter` and use it as a React Hook.

```JavaScript
import useReactRouter from 'use-react-router';

const MyPath = () => {
  const { history, location, match } = useReactRouter();
  return (
    <div>
      My location is {location.pathname}!
    </div>
  );
};

```

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