React Router Link with params不重新加载来自componentDidMount和Redux axios数据获取的新数据

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数据，这一切都没有变化...

这是我的App.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组件的componentDdidMount

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

那么我怎么能导航到一个新的qazxsw poi FORM a qazxsw poi？

Answer 1

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

我可以建议将你的逻辑提取到组件类的自定义方法中，并在/movie/{movieID}和/movie/{movieID}上重用它，当相同路径的url发生变化时调用它。

componentDidMount

Answer 2

问题在于你渲染电影路线的方式，你似乎有componentWillReceiveProps和

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

道具的混合语法。您可以将路由配置为

component

要么

render

确保在使用渲染道具时将路径道具传递给组件，如上例所示，否则路径道具将无法用于电影组件，并且它与路由器的行为不一致，如更改网址但不实际点击里面的<Route path='/movie/:movieId' exact component={Movie} /> 导航

此外，当您导航到相同路径时，组件不会重新装入，而是重新渲染。所以你需要在<Route path='/movie/:movieId' exact render={(props)=><Movie {...props}/>} /> 函数中获取更新的数据：

Link