Question

我有这个反应+ redux app

我有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}>网址栏中的路线会更新，但页面会保持不变，这意味着如果我重新加载页面时没有任何变化新路线显示新的movieID数据......

那么如何导航到新的/movie/{movieID} FOMR和/movie/{movieID}？

Answer 1

这是因为你只是在同一条路线内。

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

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

试试这样。

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

另一种解决方案是使用componentWillReceiveProps代替componentWillMount。

Answer 2

发生这种情况是因为页面 movie 的组件已安装，因此该组件的render方法将不会再次安装或更新，因此您需要触发代码来更改状态，因此重新渲染页面内容，为此，您可以实现componentDidUpdate方法，该方法会在每次修改道具时触发。

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

基本上，您在内部实现了相同的代码

React Router Link不更新页面数据

2 个答案: