Reactjs 路由器 - this.props.history.push 未呈現來自同一路徑的 URL 查詢

Question

我有一個使用 history.push 導航 URL 的組件。 問題是 URL 路徑之一依賴於 URL 中的搜索參數來渲染組件的一部分。 當用戶最初導航到 url 時它工作正常，但是當他們在該路徑內更新它時它不起作用。 這是一個例子：

App.js

<Router>
   <Route path="/jobs" component={Jobs} />
</Router>

作業的 url 將包含一個作業 ID，用於從后端檢索數據 - 例如： /jobs?id=6583ghawo90 。 使用該 ID，我在 Jobs 組件的componentDidMount()中發出get request以填充頁面。 在 Jobs 組件中，用戶可以導航到新作業，該作業通過this.props.history.push(`/jobs?id=${newjob.id}`)更新 url。 問題是，當用戶導航到更新的 URL 時，組件不會調用componentDidMount() ，因此不會請求新數據。 我可以通過手動調用this.componentDidMount()來解決這個問題，但是如果用戶點擊瀏覽器中的后退按鈕，這將不起作用。

我能做些什么來解決這個問題嗎？

Answer 1

您不應該使用componentDidMount而是componentDidUpdate ：

componentDidUpdate(prevProps) {
  // compare previous jobId and current jobId
  // refetch data if needed
}

如果您處於開發過程的開始階段，我建議您使用鈎子。