javascript - react 非 SPA 历史

Question

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

但是，在我们需要交互的页面上，我正在使用react和react-redux。

所以我有一个搜索页面，它构建了一个过滤器列表(来自 Elasticsearch 的聚合)，让人们可以过滤他们的搜索结果(与 90% 的网络使用搜索所做的事情相同)。该页面正在使用react。

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

提前致谢!

Answer 1

看起来您需要历史记录:redux-undo可能会帮助你。

关于后退按钮 - 在这种情况下，您的意思是要拦截历史记录并撤消过滤器吗？如果是这样，您应该在每次更改过滤器时向 window.location 添加哈希值。所以在这种情况下，有几个策略:

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

我确信还有更多的解决方案，但我认为他们会喜欢这些或者甚至更困难(使用historyAPI和其他东西)。所以你可以对此做出选择。

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