Skip to content
React Hook for pub-sub behavior using React Router.
TypeScript
Branch: master
Clone or download
Latest commit 87bdcc7 Oct 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src resolves #16 May 26, 2019
.gitignore rm lock Mar 11, 2019
.npmignore Update .npmignore Jun 6, 2019
.travis.yml travis deploy key Dec 26, 2018
LICENSE Initial commit Oct 26, 2018
README.md Update README.md Oct 21, 2019
package.json resolves #16 May 26, 2019
tsconfig.json resolves #13 May 10, 2019

README.md

useReactRouter Tweet version minzipped size downloads build

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.

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.

import useReactRouter from 'use-react-router';

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

Sponsor 💗

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.

You can’t perform that action at this time.