React 非 SPA 历史
React NON SPA history
我有一个应用程序,我们在某些页面上使用 React。这是一个相当大的网站,将其变成 SPA 毫无意义,因为大部分内容都是静态的。
但是在我们需要交互的页面上,我正在使用 react 和 react-redux。
所以我有一个搜索页面,它构建了一个过滤器列表(来自弹性搜索的聚合),让人们过滤他们的搜索结果(90% 的网络都在用搜索做同样的事情)。此页面正在使用 react.
假设我点击了制造商过滤器,然后应用了某种价格范围的过滤器。我希望能够点击后退按钮或单击后退按钮并让它删除最后一个过滤器或更具体地将状态移回其以前的版本。我知道这是可能的,但我一直在网上研究 react-router 和 SPA 类型 answers/tutorials/documentation。
提前致谢!
看来您需要历史记录:redux-undo 可能会帮助您。
关于后退按钮——你的意思是你想拦截 history.back 并在这种情况下撤消过滤器?如果是这样——您应该在每次更改过滤器时向 window.location 添加哈希。所以在这种情况下,策略很少:
- 您可以将所有过滤设置存储在散列中。并根据更改更新 redux 状态。共享 link 可能有用,但它可能很危险(您必须验证此数据)并且 link 可能会很长(就像老式的
?filter[type]=cars&filter[colour]=red&...
PHP 个网站)。
- 您可以使用 redux-undo,对于每个新的历史状态,只需将历史计数器之类的东西(历史中的每次更改从 0 开始递增)推入 window.location.hash。那么你就可以调度
jumpToPast(indexFromHash)
。但是如果你想让用户有可能使用定义的过滤器共享页面——你需要弄清楚如何。
我确信还有更多解决方案,但我认为他们会喜欢这些解决方案或者会更加困难(使用 historyAPI 和其他东西)。所以你可以选择这个。
如果这不适合您 — 请写下原因并提供更多信息。我会更新我的答案。
我有一个应用程序,我们在某些页面上使用 React。这是一个相当大的网站,将其变成 SPA 毫无意义,因为大部分内容都是静态的。
但是在我们需要交互的页面上,我正在使用 react 和 react-redux。
所以我有一个搜索页面,它构建了一个过滤器列表(来自弹性搜索的聚合),让人们过滤他们的搜索结果(90% 的网络都在用搜索做同样的事情)。此页面正在使用 react.
假设我点击了制造商过滤器,然后应用了某种价格范围的过滤器。我希望能够点击后退按钮或单击后退按钮并让它删除最后一个过滤器或更具体地将状态移回其以前的版本。我知道这是可能的,但我一直在网上研究 react-router 和 SPA 类型 answers/tutorials/documentation。
提前致谢!
看来您需要历史记录:redux-undo 可能会帮助您。
关于后退按钮——你的意思是你想拦截 history.back 并在这种情况下撤消过滤器?如果是这样——您应该在每次更改过滤器时向 window.location 添加哈希。所以在这种情况下,策略很少:
- 您可以将所有过滤设置存储在散列中。并根据更改更新 redux 状态。共享 link 可能有用,但它可能很危险(您必须验证此数据)并且 link 可能会很长(就像老式的
?filter[type]=cars&filter[colour]=red&...
PHP 个网站)。 - 您可以使用 redux-undo,对于每个新的历史状态,只需将历史计数器之类的东西(历史中的每次更改从 0 开始递增)推入 window.location.hash。那么你就可以调度
jumpToPast(indexFromHash)
。但是如果你想让用户有可能使用定义的过滤器共享页面——你需要弄清楚如何。
我确信还有更多解决方案,但我认为他们会喜欢这些解决方案或者会更加困难(使用 historyAPI 和其他东西)。所以你可以选择这个。
如果这不适合您 — 请写下原因并提供更多信息。我会更新我的答案。