React.js路由器-this.props.history.push不呈现来自同一路径的URL查询

Question

我有一个使用history.push导航URL的组件。问题在于URL路径之一依赖于URL中的搜索参数来呈现组件的各个部分。当用户最初导航到该url时，它可以正常工作，但是当用户在该路径内对其进行更新时，它将不起作用。这是一个示例：

App.js

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

作业的网址将包含一个作业ID，该ID用于从后端检索数据-例如：/jobs?id=6583ghawo90。使用该ID，我在Jobs组件的get request中创建了一个componentDidMount()，以填充页面。在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
}

如果您正处于开发过程的开始，我建议您使用钩子。