ReactJS浏览器“后退”按钮刷新相同的组件

Question

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

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

这是我的页面标记

<Search>组件将更新redux状态并发出所需的后端调用，以获取componentDidMount幻灯片周期事件中的数据。

组件流：

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

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

经过几次搜索后，如果用户未按下<Search />，则用户按浏览器后退按钮componentDidMount不会基于查询字符串更新数据。没有任何子组件事件被触发。我尝试使用componentWillRecieveProps，但这会陷入无限循环。

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

所以现在我有几个问题：

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

谢谢您的帮助。

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