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

【问题标题】：react router persist route history on page reload反应路由器在页面重新加载时保留路由历史记录
【发布时间】：2020-02-14 01:46:15
【问题描述】：

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

Flow = "/"->"/ab"->"/bcd"

现在，当我在“/bcd”上重新加载页面时，路由器不会保留旧路由。因此，我无法返回到以前的组件/页面。页面重新加载后如何返回到以前的组件？

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

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

是的，@babs 的解决方案将利用浏览器的返回功能简单地返回一个页面，但我对您的问题有类似的要求，我需要跟踪用户在应用程序中的来源，并通过页面重新加载/刷新。我们正在使用 redux，并且在路由器上有一个历史监听器，它为每次导航调度一个“LOCATION_CHANGE”。

问题在于它只给了你故事的一部分，并且在路线更改后被解雇，因此查看路线的来源是不可行的。我创建了一个历史缩减器，它只是在状态中存储最后 N 个更改的队列/堆栈，并与一组选择器配对，这些选择器向应用程序公开当前（顶部）和先前（顶部 - 1）位置/历史对象。这是因为虽然 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 这样的状态管理，你仍然可以使用这个回调在你的路由组件或创建路由历史对象的根应用组件中存储排序历史。作为道具传递给孩子或使用新的上下文系统，或升级并使用 redux，以获取您的历史记录。

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

【讨论】：

感谢您的回答我尝试使用类似的方法，通过收听路由更改的历史并将其推送到本地存储，但如果我将历史对象保存在堆栈/队列中，我会感到困惑我如何将其传递下去在页面刷新时到我的应用程序？
我想我会创建一个实用函数来提取本地存储，您可以在 componentDidMount 生命周期函数或“挂载”useEffect 挂钩中调用它。

【解决方案2】：

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

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

【讨论】：