陣營路由器鏈路使用參數不與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); 
    } 
}