ReactJS瀏覽器的“后退”按鈕刷新相同的組件

Question

我有一個由多個react組件組成的Search頁面。 用戶將輸入關鍵字進行搜索並查看結果，所有操作均發生在同一頁面上。

用戶可以通過單擊主頁上的搜索按鈕來訪問此頁面，也可以通過鍵入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和現有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
    }
  }