ReactJS 浏览器返回按钮刷新同一个组件答案

【问题标题】：ReactJS Browser Back button to refresh the same componentReactJS 浏览器返回按钮刷新同一个组件
【发布时间】：2019-07-16 17:08:13
【问题描述】：

我有一个由多个反应组件组成的搜索页面。用户将键入关键字进行搜索并查看结果，所有这些都发生在同一页面上。

用户可以通过单击主页上的搜索按钮来访问此页面，也可以通过输入 URL 直接访问此页面。网址格式为http://example.com/search?q=text

这是我的页面标记

<Search> 组件将更新 redux 状态并发出所需的后端调用以获取 componentDidMount lide 循环事件的数据。

组件流程：

<Search /> 将读取查询字符串并更新触发两个 API 调用的 redux 状态，一个用于构面，另一个用于结果。
<SearchBox /> 组件将在文本框中显示此文本
<Facets /> 和 <Results /> 根据后端调用更新的 redux 状态显示数据。
<CountBar /> 显示结果的一些汇总信息

初始加载后，用户可以在<SearchBox /> 的文本框中键入搜索词，然后按enter。此按钮单击将更新 redux 状态并发出history.push("/search?q=test")。这将重复上述过程并更新 URL。到这里为止一切都很好。

经过几次搜索，如果用户按下浏览器返回按钮<Search />，组件不会根据查询字符串更新数据，因为不会触发componentDidMount。不会触发任何子组件事件。我尝试使用componentWillRecieveProps，但这会进入无限循环。

我能想到的一个选项是将查询字符串作为道具传递给子组件（如果这有助于避免此问题，请不要这样做）但我需要此查询字符串处于 redux 状态，因为我需要的其他路由很少最后搜索的查询字符串值。

所以现在我有几个问题：

在这种情况下处理浏览器后退按钮的最佳方式是什么？
这里的组件负责将查询字符串更新为redux，这是一个好的行为吗？
我使用的是 React 16.7 而不是 React Hooks。升级到最新版本或使用 Hooks 是否会有所帮助？

感谢您的帮助。

【问题讨论】：

我建议使用这个库来处理查询字符串/redux 状态同步 - github.com/Treora/redux-query-sync。如果你不想使用整个包，你可以考虑使用 history.listen 回调，你可以实现它来更新你的 redux 状态。
@ŽeljkoHuber 我应该如何以及在哪里触发我的操作？状态变化应该触发一个动作

标签： javascript reactjs redux

【解决方案1】：

当我最初尝试componentWillReceivePorps 时，我可能错过了一些东西。我试过了，它按预期工作。在这种方法中，我将newprops 与现有道具进行比较，以查看它们是否不同并相应地进行 API 调用。对于第一个页面加载，componentDidMount 将调用 API。

componentWillReceiveProps(newProps: any){

    let keyword = querystring.parse(this.props.location.search).q;
    let newKeyword = querystring.parse(newProps.location.search).q;

    if(keyword != newKeyword){
      //trigger redux action
    }
  }

【讨论】：