React Router Link with params not reloading page with new da

Question

我有这个反应+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 数据......

这是我的应用程序.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 组件的组件 DdidMount

...
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);
}
...

那么，如何使导航到新/movie/{movieID}FOMR 成为/movie/{movieID}呢？

Answer 1

当您从一个路由导航到同一路由的另一个实例时，react-router 使用相同的组件而不挂载或卸载，使用不同的 props 重用同一组件。 所以形成一个开发者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}/>} />

确保在使用渲染道具时将路由器道具传递给组件，如上例所示，否则路由器道具将不适用于电影组件，并且它的行为与路由器不一致，例如更改 url，但在单击其中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);
}
}