React Router Link with params not reloading page with new data from componentDidMount and Redux axios data fetching
577 观看
2回复
361 作者的声誉
I have this react + redux app
I have 1 Movie component with some movie data displayed on it which are fetched from API.
So at the bottom, i decided to add a Similar movies section with a couple of components to navigate to the new movie pages.
<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>
Now when I'm at a root route for instance /toprated
and i click on a <Link to={"/movie/"+movie.id} key={index}>
i get navigated to the particular route (e.g. /movie/234525
) and everything works fine , but if I'm in a /movies/{some move ID }
route and i click on some <Link to={"/movie/"+movie.id} key={index}>
The route in the URL bar gets updated, but the page stays still, meaning nothing changes if I reload the page with the new route the new movieID data is displayed...
this is my 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>
and the componentDdidMount of the Movie.jsx Component
...
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);
}
...
So how can i make a navigation to a new /movie/{movieID}
FOMR a /movie/{movieID}
?
回应 2
0像
1790 作者的声誉
When you navigate from a route to another instance of the same route, react-router uses the same component without mounting or un-mounting, re-using the same component with different props. So form a developer POV, you will see the component will be used but it's props will be updated.
What I can suggest is to extract your logic into a custom method on the component class and re-use it on componentDidMount
and componentWillReceiveProps
, which is called when the url of the same route changes.
class MyComponent extends React.Component {
componentDidMount() {
myCustomLogic();
}
componentWillReceiveProps(nextProps) {
if (nextProps.params.movieId !== this.props.params.movieId) {
myCustomLogic();
}
}
myCustomLogic() {
...
}
}
作者: Farzad YZ
发布者: 2017 年 12 月 27 日
0像
120434 作者的声誉
The problem is in the way you have rendered the Movie Route, You seem to have mixed syntaxes of component
and render
props. You could either configure your Route as
<Route path='/movie/:movieId' exact component={Movie} />
or
<Route path='/movie/:movieId' exact render={(props)=><Movie {...props}/>} />
make sure to pass the Router props to the component when using render props like it is shown in the above example or else the Router props won't be available to Movie component and it would behave inconsistently with the Router like changing the url but not actually navigating when clicking on Link
inside it
Also when you navigate to the Same route the component isn't re-mounted but re-rendered. So you need to fetch the updated data in componentWillReceiveProps
function:
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);
}
}
作者: Shubham Khatri
发布者: 2017 年 12 月 27 日
来自类别的问题 :
- javascript 如何检测网页中使用了哪一个定义的字体?
- javascript JavaScript对象的长度
- javascript 从下拉框中获取文本
- javascript 带隐藏按钮的登录脚本
- javascript 如何使用Prototype自动调整textarea?
- javascript 使用JavaScript滚动溢出的DIV
- reactjs 从github上的例子中反应js和bootstrap模态
- reactjs reactjs - 锚标签链接
- reactjs this.setState没有像我期望的那样合并状态
- reactjs Rerender view on browser resize with React
- reactjs 在Bootstrap popover中渲染React组件
- reactjs 如何从React中的事件对象访问自定义属性?
- router 如何在Java中确定路由器/网关的IP?
- router 如何以编程方式循环路由器?
- router 何时使用辅助DNS服务器?
- router 没有来自网关的ARP响应
- router DHCP中继在Cisco路由器中配置
- router SSH -L连接成功,但localhost端口转发不起作用“通道3:打开失败:连接失败:连接被拒绝”