how to listen for route change in react-router-dom v6

Question

am trying to migrate the old react router dom code to v6 and I want to know how to listen for route change, I am now using useHistory

const history = useHistory()
//then
history.listen(...)

I did read the new docs and I did find that useHistory was changed to useNavigate

const navigate = useNavigate()
//then
navigate.listen(...) // listen is not a function

can you please help me find a way to listen to the route change in v6

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Answer 1

From documentation (https://reactrouter.com/en/main/hooks/use-location), use this hook

let location = useLocation();

React.useEffect(() => {
  ga('send', 'pageview');
}, [location]);

Answer 2

The navigate function is a function, not an object like the older react-router-dom version 5's history object.

You can still create a custom history object but you'll need to create a custom router to use it. This allows you to import your history object and create listeners.

Create a custom router example, use one of the higher-level routers as an example for how they manage the location and state, i.e. BrowserRouter:

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

In your code create the custom history object for use by your new custom router and other components. Ensure you have history@5 installed as a project dependency. This is the same version used by RRDv6. If you need to install it run npm i history@5 to add it to the project's dependencies.

const history = createBrowserHistory();
export default history;

Use your router and pass your history object to it.

import CustomRouter from '../CustomRouter';
import history from '../myHistory';

...

<CustomRouter history={history}>
  ....
</CustomRouter>

In a component you want to listen to location changes on, import your history object and invoke the listen callback as you did previously.

import history from '../myHistory';

...

useEffect(() => {
  const unlisten = history.listen((location, action) => {
    // ... logic
  });

  return unlisten;
}, []);

If you want, you may be able to also create your own custom useHistory hook that simply returns your history object.

Update

react-router-dom has started exporting a HistoryRouter for a use case like this. Instead of importing the low-level Router and implementing the internal logic you import unstable_HistoryRouter as HistoryRouter and pass your custom history object (memory, hash, etc).

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import history from "../myHistory";

...

<HistoryRouter history={history}>
  ....
</HistoryRouter>

Notes on RRDv6.4+

If you are using RRDv6.4+ and not using the Data routers the good-ish news is that unstable_HistoryRouter is still being exported through at least RRDv6.8.0. You can follow along the filed issue in the repo here.

If you are using the Data routers then the new "unstable" method is to use an attached navigate function from the router object directly.

Example:

import { createBrowserRouter } from 'react-router-dom';

// If you need to navigate externally, instead of history.push you can do:
router.navigate('/path');

// And instead of history.replace you can do:
router.navigate('/path', { replace: true });

// And instead of history.listen you can:
router.subscribe((state) => console.log('new state', state));

I've had mixed results with using the history.listen solution between versions 6.4 and 6.8, so probably best to keep an eye on the linked issue for whatever the RRD maintainers say is the current "unstable" method of accessing the "history".

Answer 3

To add to the accepted answer (can't comment, not enough rep points), subscribing to the history through a useEffect with location.pathname in the dependency array won't work if the navigation unmounts the component you're attempting to call the useEffect from.

Answer 4

If you need to react to a change in the route due to back button specifically:

In react-router-dom v6.8.0 or even earlier, trying to attach a listener to the history, will throw an error: A history only accepts one active listener.

I learnt that react-router-dom seems to introduce a lot of changes between the minor versions as well, so you should take words like unsafe and unstable , like in unstable_HistoryRouter especially serious. They will break sooner or later, if you're not very lucky.

In my case I had to upgrade to get the reintroduced optional route params, and the UNSAFE_NavigationContext my former colleague decided to use, didn't work anymore.

So here's a high level approach, that allows you to listen to the actions on the Router's history stack, without attaching another listener to the router yourself. Which is fine, as it already has one listener by default, and it's just not exposed, but the actions derived from it are, which is enough.

In the following example we are reacting to changes in location and for each change, we check if it was due to a POP action, thats e.g. triggered when the browser's back button is used, and then execute whatever..

import { useEffect } from "react";
import {
  Location,
  NavigationType,
  useLocation,
  useNavigationType,
} from "react-router-dom";

export const useBackListener = (callback: () => void) => {
  const location: Location = useLocation();
  const navType: NavigationType = useNavigationType();

  useEffect(() => {
    if (navType === "POP" && location.key !== "default") {
      if (someCondition === true) callback();
      else {
        doSomethingElse();
      }
    }
  }, [location]);
};