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.
Share Improve this question edited Aug 13, 2018 at 15:19 dance2die 37k39 gold badges136 silver badges197 bronze badges asked Aug 13, 2018 at 15:14 goodoldneongoodoldneon 531 silver badge3 bronze badges2 Answers
Reset to default 6You 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>
);
}