React Router，單擊瀏覽器的后退按鈕時的生命周期

Question

我想檢測用戶何時單擊后退按鈕。 本質上，當用戶從/ projects轉到/ projects / foo時，導航樣式會更改。

<Route path="/projects" component={(props, state, params) => 
        <Projects {...props} />
</Route>

當檢測到從/ projects到特定項目的onClick事件時，此方法工作正常，但是當用戶單擊后退按鈕時，未調用componentDidMount ...。我試圖使用this.props.location.pathname確定特定路徑，但是由於需要設置狀態，因此我無法在render執行此操作。

有沒有一種“反應”的方式來解決這個問題？ 謝謝

Answer 1

如您所述， componentDidMount僅在安裝組件時被調用一次。 而是使用生命周期掛鈎componentWillReceiveProps 。 這是文檔。

如果您位於所需/正確的路徑，則可以使用此條件有條件地設置狀態。 這將更新狀態，然后重新渲染組件。

更新：

自發布此答案以來，不推薦使用componentWillReceiveProps WillReceiveProps。 根據您的用例，您將需要使用shouldComponentUpdate或getDerivedStateFromProps 。 有關此的更多信息。