Issue
使用 React Router v4,如何使用listen()
方法区分goBack()
和goForward()
调用?
据我所知,location
和action
参数没有提供足够的信息来区分。action
论点对后退和前进都POP
。
history.listen((location, action) => {
// action = 'POP' when goBack() and goForward() are called.
}
我正在使用历史节点模块。
目的
我有一个面包屑组件,其项目处于状态。当用户返回时,我需要弹出最后一个面包屑。
您可以从数组中的location
对象收集所有key
值,并使用它来确定键是按顺序在前一个键之前还是之后,并使用它来区分goBack
和goForward
。
例
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);