Javascript 单击“返回”按钮刷新同一组件

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

用户可以通过单击主页上的搜索按钮来访问此页面，也可以通过键入URL直接访问此页面。URL模式是

http://example.com/search?q=text

这是我的页面标记

组件将更新redux状态并发出所需的后端调用，以获取

组件didmount

lide循环事件的数据

组件流：

将读取查询字符串并更新redux状态，该状态将触发两个API调用，一个用于facet，另一个用于结果

组件将在文本框中显示此文本

和

根据后端调用更新的redux状态显示数据

显示结果的一些聚合信息

初始加载后，用户可以在

中的文本框中键入搜索词，然后按

enter

。单击此按钮将更新redux状态并发出

历史记录。按下（“/search？q=test”）

。这将重复上述过程并更新URL。在这里之前一切都很好

经过两次搜索后，如果用户按下浏览器后退按钮，组件不会基于查询字符串更新数据，因为不会触发

componentDidMount

。未触发任何子组件事件。我尝试使用

组件willreceiveprops

，但这将进入一个无限循环

我可以考虑的一个选项是将查询字符串作为道具传递给子组件（如果这有助于避免此问题，则不这样做），但我需要处于redux状态的此查询字符串，因为我没有其他需要上次搜索的查询字符串值的路由

现在我有几个问题：

在这种情况下，处理浏览器后退按钮的最佳方法是什么

在这里，组件负责将查询字符串更新为redux，这是一个好的行为吗

我使用的是React 16.7，而不是React挂钩。升级到最新版本或使用挂钩是否会有所帮助

---

谢谢您的帮助。

我在尝试

组件时可能遗漏了一些内容。最初，组件将收到porps

。我尝试了这个，它的工作正如预期。在这个方法中，我将

newprops

与现有的props进行比较，看看它们是否不同，并相应地进行API调用。对于第一个页面，load

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
    }
  }

---

我建议使用这个库来处理查询字符串/redux状态同步-。如果您不想使用整个软件包，可以考虑使用history.listen回调，您可以实现该回调来更新redux状态。@eljkoHuber如何以及在何处触发我的操作？状态更改应触发一个操作