我有这样的反应+终极版应用阵营路由器链路使用参数不与componentDidMount和终极版爱可信数据的新数据刷新页面获取
我有它显示的一些电影数据，从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根路线，我点击一个我获得导航到特定的途径（例如/movie/234525），一切工作正常，但如果我在一个/movies/{some move ID }路线我点击一些网址栏中的路线得到更新，但网页保持静止，这意味着什么也没有改变，如果我重新加载页面与新的路线，新的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}？
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);
}
}
当您从一个路由导航到同一路由的另一个实例时，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() {
...
}
}
