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 ）。

在doc中有一个例子如何在这里实现它（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>

从反应路由器

2 个答案: