React NON SPA历史记录

Question

我有一个应用程序，我们在某些页面上使用反应。它是一个非常大的网站并将其变成SPA将毫无意义，因为大部分内容都是静态的。

然而，在我们需要互动的页面上，我正在使用react和react-redux。

所以我有一个搜索页面，它构建了一个过滤器列表（来自弹性搜索的聚合），可以让人们过滤掉他们的搜索结果（同样的事情，90％的网络正在进行搜索）。这个页面正在使用react。

让我说我点击制造商的过滤器，然后我应用某种价格范围的过滤器。我希望能够点击后退按钮或单击后退按钮，让它删除最后一个过滤器或更具体地将状态移回其先前版本。我知道这是可能的，但我一直在网上反应路由器和SPA类型的答案/教程/文档。

提前致谢！

Answer 1

您似乎需要一段历史记录：redux-undo可能对此有所帮助。

关于后退按钮 - 你的意思是你想在这种情况下拦截history.back和撤消过滤器吗？如果是这样的话 - 你应该在每次更改过滤器时向window.location添加一个哈希值。所以在这种情况下，策略很少：

1. 您可以将所有过滤设置存储在哈希中。并根据更改更新redux状态。它可能对共享链接很有用，但它可能很危险（你必须验证这些数据）并且链接可能很长（在老式的PHP网站中就像?filter[type]=cars&filter[colour]=red&...一样）。
2. 您可以使用redux-undo，并且对于每个新的历史状态，只需将历史计数器（历史记录中的每个更改从0递增）推送到window.location.hash。那么你就可以发送jumpToPast(indexFromHash)了。但是，如果您想让用户可以与定义的过滤器共享页面 - 您需要弄清楚如何。

我确信还有更多的解决方案，但我认为他们会喜欢这些或者更难（使用historyAPI和其他东西）。所以你可以选择这个。

如果这不适合你 - 只需写下原因并告诉更多信息。我会更新我的答案。