阵营路由器链路使用参数不与componentDidMount和终极版爱可信数据的新数据刷新页面获取

Question

我有这样的反应+终极版应用

我有它显示的一些电影数据，从API获取1层电影的组成部分。

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

<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数据显示...

这是我的应用程序.js

<BrowserRouter> 
    <Switch> 
     <Route path='/' exact component={Home} /> 
     <Route path='/discover' exact component={Discover} /> 
     <Route path='/toprated' exact component={TopMovies} /> 
     <Route path='/upcoming' exact component={Upcoming} /> 
     <Route path='/movie/:movieId' exact component={()=><Movie/>} /> 
     </Switch> 
    </BrowserRouter> 

和的Movie.jsx组件

... 
componentDidMount() { 
    window.scroll(0, 0); 
    this.movieID = parseInt(window.location.href.split("/")[window.location.href.split("/").length-1]); 
    this.props.getMovieInfo(this.movieID); 
    this.props.getMovie_YOUTUBE(this.movieID); 
    this.props.getMovie_SIMILAR(this.movieID); 
    } 
    ... 

的componentDdidMount那么，怎样才能使一个导航到一个新的/movie/{movieID} FOMR一个/movie/{movieID}？

Answer 1

当您从一个路由导航到同一路由的另一个实例时，react-router将使用相同的组件，而无需安装或卸载，重复使用具有不同道具的相同组件。 因此，组建一个开发人员POV，你会看到组件将被使用，但它的道具将被更新。

我可以建议的是将您的逻辑提取到组件类上的自定义方法中，并在componentDidMount和componentWillReceiveProps上重新使用它，当相同路由的URL更改时调用它。

class MyComponent extends React.Component { 
    componentDidMount() { 
    myCustomLogic(); 
    } 
    componentWillReceiveProps(nextProps) { 
    if (nextProps.params.movieId !== this.props.params.movieId) { 
     myCustomLogic(); 
    } 
    } 
    myCustomLogic() { 
    ... 
    } 
} 

Answer 2

的问题是在已渲染电影路线的方式，你似乎有混合的component和render道具语法。你既可以配置您的路线

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

或

<Route path='/movie/:movieId' exact render={(props)=><Movie {...props}/>} /> 

确保使用渲染道具喜欢它显示在上面的例子中，否则路由器道具的时候赢得了到路由器道具传递到组件不可用于Movie组件，它将与路由器不一致，例如更改网址，但在点击Link时不会实际导航

此外，当您导航到相同路由时，组件不会重新链接未重铺但重新呈现。因此，你需要在componentWillReceiveProps功能来获取更新的数据：

componentWillReceiveProps(nextProps) { 

    if(nextProps.match.params.movieId !== this.props.params.movieId) { 
     window.scroll(0, 0); 
     this.movieID = nextProps.match.params.movieId 
     this.props.getMovieInfo(this.movieID); 
     this.props.getMovie_YOUTUBE(this.movieID); 
     this.props.getMovie_SIMILAR(this.movieID); 
    } 
}