從反應路由器檢索回導航操作

Question

在我正在構建的應用程序中，我選擇了react-router來處理導航流程，但是我需要跟蹤在瀏覽器上導航的事件，因此當您嘗試在新的渲染器中加載組件時，我需要知道用戶已按下“后退”按鈕降落在此處。 跟蹤它的最佳方法是什么？ 我很確定這是使用History 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>