详解React-Router中Url参数改变页面不刷新的解决办法
问题
今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样:
export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch> </BrowserRouter> ); } }
按照官方文档的说法,可以在ChannelPerPage这个组件中使用
this.props.match.params
来获取url参数的值,但是我发现如果你在这个url下只将url中的参数部分改变,比如channelId从1变成2的时候,页面并不会刷新。
解决办法
查阅资料后发现这样的根本原因是props的改变并不会引起组件的重新渲染,只有state的变化才会引起组件的重新渲染,而url参数属于props,故改变url参数并不会引起组件的重新渲染。
后来发现React的组件中有一个可复写的方法
componentWillReceiveProps(nextProps) { ... }
这个方法可以在React组件中被复写,这个方法将会在props改变的时候被调用,所以你可以使用这个方法将nextProps获取到,并且在这个方法里面修改state的内容,这样就可以让组件重新被渲染。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Vite+React+TypeScript手撸TodoList的项目实践
本文主要介绍了Vite+React+TypeScript手撸TodoList的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-05-05聊聊ant design charts 获取后端接口数据展示问题
今天在做项目的时候遇到几个让我很头疼的问题,一个是通过后端接口成功访问并又返回数据,但拿不到数据值。其二是直接修改state中的data,console中数组发生变化但任然数据未显示,这篇文章主要介绍了ant design charts 获取后端接口数据展示,需要的朋友可以参考下2022-05-05React使用Context与router实现权限路由详细介绍
这篇文章主要介绍了React使用Context与router实现权限路由的详细过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2023-01-01
最新评论