ReactJS-返回时重新渲染相同组件

我有一个像这样的URL结构

foo.com/details/:id

并使用它。如果搜索ID“123”，组件将呈现数据库中的特定信息，并将URL更新为

foo.com/details/123

如果搜索另一个ID“456”，URL将更新为

foo.com/details/456

使用

this.props.history.push（${this.state.id}）

简而言之，组件将重新渲染。如果重新加载或直接转到带有URL的ID，则该参数将按预期工作。但我的问题是：如果在浏览器中按back按钮，URL会正确更新（456=>123），但组件不会重新呈现

当URL参数更改时，如何强制组件重新呈现

编辑：更多代码

在构造函数中：


if（this.props.match.params.id！==未定义）{
this.state.id=this.props.match.params.id；
this.getData（this.state.id）
}
当
url
指向
相同的组件时，该组件不会被卸载和重新安装，而是将具有不同道具的相同组件传递给它。在这里，实现理想行为的方法很少

如果您能够在安装的根元素上指定一个
键（使用ID）。（该键应该位于使用ID并执行某些操作的元素上，而不是在其中）。如果找不到正确的元素来实现这一点，请转到下一个元素

使用
组件将接收props
并比较
下一步操作
id
和
当前prop
id
并编写逻辑以重新初始化新id的组件

componentWillReceiveProps(nextProps) {
 if (this.props.id !== nextProps.id) {
   // write your logic to update the component with new ID 
 }
}


当道具改变时，组件不会重新播放。所以，当一个id为123的组件已经挂载，并且您将id更新为456时，将不会触发rerender。您必须通过更新状态来触发更新。我建议您使用componentDidUpdate而不是componentWillReceiveProps，因为它被标记为不安全的，这意味着它可能在React的未来版本中被弃用。您可以选择componentDidUpdate或componentShouldUpdate。
下面是使用componentDidUpdate的实现

componentDidUpdate(prevProps, prevState) {
  if (this.props.match.params.id !== prevProps.match.params.id) { 
     this.setState({ id: this.props.match.params.id}); 
     this.getData(this.props.match.params.id);
    // or any other logic..
  }
}

对不起，我不明白你拿钥匙是什么意思。
组件WillReceiveProps
不安全，因此我无法使用它。如果需要指向解决方案，您需要显示更多代码。可以使用
键
呈现组件，但前提是组件的结构允许。使用处理id状态的代码更新了上面的帖子要使用
键
解决方案，我们需要查看
容器
，
组件
和相关的
路线
如果
键
可以使用。或者您可以使用@shubham的解决方案，如果您使用正确的变量来比较
if（this.props.match.params.id！==prevProps.match.params.id）{this.setState（{id:this.props.match.params.id}）；this.getData（this.props.match.params.id）}，那么它应该可以工作。
您的第二个解决方案就像一个符咒，我确实比较了错误的值。非常感谢。