Question

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

Flow =“ /”->“ / ab”->“ / bcd”

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

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

Answer 1

您可以使用以下功能，这与react-router无关。它只是使用浏览器后退按钮中的逻辑：

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

Answer 2

是的，@ 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实际上提供了您可以访问的历史记录堆栈

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

2 个答案: