从反应路由器检索后退导航操作

Question

在我正在构建的应用程序中，我选择了 react-router 来处理导航流，但我需要在浏览器上跟踪导航的事件，所以当你尝试在新渲染中加载组件时，我需要知道用户是否通过按后退按钮降落在这里。跟踪它的最佳方法是什么？我很确定这是使用历史 API，但找不到任何直接的方法来检查它，考虑到库的工作方式，感觉它应该很容易。

任何能对此事有所了解的人都将非常欢迎！谢谢！

Answer 1

你是对的！React-Router 使用 HTML5 历史记录 API，这在文档中进行了解释 此处 （https://github.com/rackt/react-router/blob/master/docs/API.md#histories） 您需要导入"浏览器历史记录"包并将其传递到路由器中，记录在此处 （https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#browserhistory）。

文档中有一个示例 如何在这里实现它 （https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md#example-implementation）

Answer 2

没有开箱即用的东西可以检测到这一点，您将不得不侦听路由更改并构建堆栈。每次事件发生时，您都需要检查堆栈以检测它是向前还是向后导航。实现起来非常棘手，但这是您可以做到的地方：

import { Router, browserHistory } from 'react-router';
let pathStack = [];
browserHistory.listen(function(ev) {
  pathStack.unshift(ev.pathname);
  console.log('Do something clever with:', pathStack);
});
<Router history={browserHistory}>{routes}</Router>