https://github.com/CharlesStover/use-react-router

React Hook for pub-sub behavior using React Router.
https://github.com/CharlesStover/use-react-router

npm npmjs react react-hooks react-router reactjs travis travis-ci travisci typescript

Last synced: about 2 months ago
JSON representation

React Hook for pub-sub behavior using React Router.

• Host: GitHub
• URL: https://github.com/CharlesStover/use-react-router
• Owner: CharlesStover
• License: mit
• Archived: true
• Created: 2018-10-26T19:27:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-09-19T21:47:32.000Z (about 2 years ago)
• Last Synced: 2024-09-27T04:01:21.603Z (3 months ago)
• Topics: npm, npmjs, react, react-hooks, react-router, reactjs, travis, travis-ci, travisci, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-react-router
• Size: 29.3 KB
• Stars: 567
• Watchers: 12
• Forks: 30
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-react-router` - sub behavior using React Router. (Packages)
• awesome-react-hooks-cn - `use-react-router` - sub behavior using React Router. (Packages)
• awesome-list - use-react-router - sub behavior using React Router. | CharlesStover | 573 | (TypeScript)
• awesome-react-hooks - `use-react-router` - sub behavior using React Router. (Packages)
• awesome-react-hooks - `use-react-router` - sub behavior using React Router. (Packages)

README

        
# useReactRouter

[![version](https://img.shields.io/npm/v/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)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/use-react-router.svg)](https://www.npmjs.com/package/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 (

    


      My location is {location.pathname}!

    

  );

};

```