reactjs - 在 React 中导航之前保存动态搜索参数

Question

我有一个动态搜索组件，它根据挂钩搜索字符串过滤预加载的搜索结果。

像这样的东西：https ://codesandbox.io/s/4qp6xn1rkw

目前，当你选择一个搜索结果时，它会带你到结果页面，当你按下“返回”按钮时，它会带你回来，但是钩子被重置了，所以所有的搜索参数都丢失了。

我想在用户离开之前保存搜索参数，这样当他们返回时，他们可以点击同一查询中的另一个搜索结果。

我曾考虑将它们保存在本地存储中，但这会在用户离开网站并稍后返回时引入不必要的行为。

在导航到结果页面之前，我正在考虑将搜索查询放入 URL，但我找不到这样做的合理方法。（我正在使用 React Router V4）

在用户搜索时更新 URL 也很好，这样他们就可以为搜索查询添加书签以供以后使用，但这不是首要任务。

PS：如果你想看看我的实际实现，你可以在这里看到：http: //aesthetics.red

标签： reactjsreact-navigation