Issue

With React Router v4, how do I differentiate between goBack() and goForward() calls with the listen() method?

As far as I can tell, the location and action parameters don't give enough info to distinguish. The action argument is POP for both back and forward.

history.listen((location, action) => {
  // action = 'POP' when goBack() and goForward() are called.
}

I'm using the history node module.

Purpose

I have a breadcrumbs ponent whose items are held in state. When the user goes back, I need to pop the last breadcrumb.

Issue

With React Router v4, how do I differentiate between goBack() and goForward() calls with the listen() method?

As far as I can tell, the location and action parameters don't give enough info to distinguish. The action argument is POP for both back and forward.

history.listen((location, action) => {
  // action = 'POP' when goBack() and goForward() are called.
}

I'm using the history node module.

Purpose

I have a breadcrumbs ponent whose items are held in state. When the user goes back, I need to pop the last breadcrumb.

• javascript
• reactjs
• react-router
• react-router-v4

2 Answers 2

You could collect all the key values from the location object in an array and use that to figure out if keys e before or after the previous one in order, and use that to distinguish between a goBack and goForward.

Example

const keys = [];
let previousKey;

history.listen((location, action) => {
  const { key } = location;

  // If there is no key, it was a goBack.
  if (key === undefined) {
    console.log('goBack')
    return;
  }

  // If it's an entirely new key, it was a goForward.
  // If it was neither of the above, you can pare the index 
  // of `key` to the previous key in your keys array.  
  if (!keys.includes(key)) {
    keys.push(key);
    console.log('goForward');
  } else if (keys.indexOf(key) < keys.indexOf(previousKey)) {
    console.log('goBack');
  } else {
    console.log('goForward');
  }

  previousKey = key;
});

history.push("/test");
history.push("/test/again");
setTimeout(() => history.goBack(), 1000);
setTimeout(() => history.goBack(), 2000);
setTimeout(() => history.goForward(), 3000);

Update for React Router Dom v6:

import { useNavigate } from "react-router-dom";

export const App = () => {
  const navigate = useNavigate();
  const handleClickHome = () => {
    navigate("/home");
  }
  const handleClickBack = () => {
    navigate(-1);
  }
  const handleClickForward = () => {
    navigate(1);
  }
  return (
    <div>
      <button onClick={handleClickHome}>Go Home</button>
      <button onClick={handleClickBack}>Go Back</button>
      <button onClick={handleClickForward}>Go Forward</button>
    </div>
  );
}