React Router -- Differentiate goBack() and goForward() in listen()

Question

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 component whose items are held in state. When the user goes back, I need to pop the last breadcrumb.

Answer 1

You could collect all the key values from the location object in an array and use that to figure out if keys come 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 compare 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);