React路由器参数更改时强制重新安装组件？

Posted 2023-02-21

【中文标题】React路由器参数更改时强制重新安装组件？

【英文标题】：Force remounting component when React router params changing?

【发布时间】：2018-06-09 03:21:55

【问题描述】：

我编写了一个简单的应用程序，其中远程资源在组件的componentDidMount 函数中获取。

我正在使用 React Router，当路由完全改变时，之前的组件会被很好地卸载，然后新的组件会被安装。

问题是当用户停留在同一条路线上时，但只有一些参数发生了变化。在这种情况下，仅更新组件。这是默认行为。 但有时很难处理以前只需要 componentDidMount 的所有子组件中的更新...

当用户停留在同一条路线上但某些参数发生变化时，有没有办法强制重新安装组件？

谢谢。

【问题讨论】：

How to force remounting on React components?的可能重复

我知道这不是您要寻找的答案，但我通常只是检查 componentWillReceiveProps 中的参数是否更改并调用在 componentDidMount 中运行的相同初始化代码。即if (this.props.match.userId !== nextProps.match.userId) initComponent(nextProps.match.userId);

你能说出你有什么版本的 react-router 吗？

Component does not remount when route parameters change的可能重复

【参考方案1】：

执行以下操作

路线应该是这样的。

<Route  path='/movie/:movieId'  component=Movie /> 

当你去 /movie/:movieID

class Movie extends Component 

 loadAllData = (movieID) => 
    //if you load data 
    this.props.getMovieInfo(movieID);
    this.props.getMovie_YOUTUBE(movieID);
    this.props.getMovie_SIMILAR(movieID);
  
  componentDidMount() 
    this.loadAllData(this.props.match.params.movieId);
  
  componentWillReceiveProps(nextProps)
    if(nextProps.match.params.movieId !== this.props.match.params.movieId) 
      console.log(nextProps);
      this.loadAllData(nextProps.match.params.movieId);
    
  

  render()
    return( ... stuff  and <Link to=`/movie/$id` key=index>...</Link>)
  
  

【讨论】：

我更喜欢这个答案：***.com/a/49441836/11878372