从反应路由器检索返回导航操作答案

【问题标题】：Retrieve back navigation action from react router从反应路由器检索返回导航操作
【发布时间】：2016-05-04 06:38:43
【问题描述】：

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

任何能对此事有所了解的人都会受到欢迎！谢谢！

【问题讨论】：

标签： javascript reactjs navigation back-button react-router

【解决方案1】：

你是对的！ React-Router 使用 HTML5 History 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)

【讨论】：

谢谢@Stefano，我很感激，但我已经在文档方面做到了这一点:) 当我尝试了解天气时，我的渲染是否来自浏览器的后退操作，问题就出现了。通过渲染视图对象的历史对象没有记录在我能找到的任何地方。还是谢谢你！

【解决方案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>

【讨论】：

耶！谢谢@Dominic，这可以完成工作！不过感觉有点hacky，因为有一个完整的库处理导航流程。我不敢相信相同的堆栈不是在通过应用程序视图渲染传递的历史对象上本地实现的。还是谢谢！
对不起@Dominic，我认为这可以完成这项工作，但实际上并没有。自然点击导航的任何重复都会被视为后退。您可以使用 ev.action，因为后退、前进和刷新都带有“POP”，但同样您不能真正区分前进和后退导航，堆栈检查逻辑看起来相同。
是的，我不确定是否有很好区分的方法（除了检查路线更改是否来自链接或其他东西）