反应路由器在页面重新加载时保留路由历史记录

Question

有什么方法可以在页面重新加载时保留反应路由历史并将其传递给我的组件。例如：- 我在带有 link "/" 的仪表板组件上，然后我使用 link "/ab" 转到另一个组件，然后我使用 Link "/bcd" 转到另一个组件.

流量=“/”->“/ab”->“/bcd”

现在，当我在“/bcd”上重新加载页面时，路由器不会保留旧路由。所以结果我不能return到之前的components/pages。即使在页面重新加载后，我怎么能 return 到以前的组件？

我正在使用 HashRouter。 React-router 版本是 4.3.0

Answer 1

你可以使用下面的函数，这个和react-router无关。它只是使用浏览器后退按钮的逻辑：

function goBack() { 
   window.history.back();
}

Answer 2

是的，@babs 的解决方案将利用浏览器的后退功能来简单地返回页面，但我对您的问题有类似的要求，我需要跟踪用户在应用程序中的来源，并持续浏览页面reloads/refreshes。我们正在使用 redux 并在路由器上有一个历史监听器，它为每个导航调度 "LOCATION_CHANGE"。

问题是它只为您提供了故事的一部分，并且在 路线更改后 被解雇，因此查看路线的来源是 no-go。我创建了一个 history reducer，它简单地在状态中存储最后 N 个更改的 queue/stack 与一组选择器配对，这些选择器向应用程序公开当前（顶部）和先前（顶部 - 1）location/history object秒。这是因为 react-router 的 history is mutable 并没有提供您期望的所有内容*。

监听变化的基本模式是：

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
  // location is an object like window.location
  console.log(action, location.pathname, location.state);
});

如果您不使用像 Redux 这样的状态管理，您仍然可以使用此回调在您的路由组件或创建路由器历史记录的根应用程序组件中存储各种历史记录 object。作为 props 传递给 children 或使用新的上下文系统，或升级并使用 redux，以获取您的历史记录。

* MemoryHistory 实际上提供了一个您可以访问的历史堆栈

反应路由器在页面重新加载时保留路由历史记录

react router persist route history on page reload

reactjs

react-router

react-router-v4

react-router-dom