React Router Link 不更新页面数据答案

【问题标题】：React Router Link dont updated page dataReact Router Link 不更新页面数据
【发布时间】：2017-12-26 22:41:00
【问题描述】：

我有这个 react + redux 应用

我有 1 个电影组件，上面显示了一些从 API 获取的电影数据。

因此，我决定在底部添加一个类似电影部分，其中包含几个组件来导航到新电影页面。

<div className="similar_movieS_container">
    { this.props.thisMovieIdDataSIMILAR.slice(0,4).map((movie,index)=>{
         return(

            <Link to={"/movie/"+movie.id} key={index}>

               <div className="similar_movie_container">
                 <div className="similar_movie_img_holder">
                   <img src={"http://image.tmdb.org/t/p/w185/"+movie.poster_path} className="similar_movie_img" alt=""/>
                    </div>
                  </div>
                </Link>
                )
            })
          }
 </div>

现在，当我在根路径（例如 /toprated）并单击 <Link to={"/movie/"+movie.id} key={index}> 时，我会导航到特定路径（例如 /movie/234525）并且一切正常，但如果我在/movies/{some move ID } 路由，我点击了一些<Link to={"/movie/"+movie.id} key={index}> URL 栏中的路由得到更新，但页面保持静止，这意味着如果我用新路由重新加载页面，新的movieID 数据显示不会有任何变化......

那么我怎样才能导航到新的/movie/{movieID} FOMR 和/movie/{movieID}？

【问题讨论】：

标签： javascript reactjs router

【解决方案1】：

那是因为你在同一条路线上。

解决此问题的方法很少。我打赌你正在渲染这样的路线。

<Route path="/movie/:id" component={Movie} />

像这样试试。

<Route path="/movie/:id" component={() => <Movie />} />

另一种解决方案是使用componentWillReceiveProps 而不是componentWillMount。

【讨论】：

component={() => <Movie />} 没有解决问题，如何使用componentWillReceiveProps 解决问题？

【解决方案2】：

这是因为页面movie的组件被挂载了，所以这个组件的render方法不会被再次挂载或更新，所以你需要触发代码来改变状态，结果重新渲染页面内容，为此您可以实现 componentDidUpdate 方法，该方法会在每次修改 props 时触发。

https://reactjs.org/docs/react-component.html#componentdidupdate

基本上你在里面实现了上面相同的代码

【讨论】：