详解React-Router中Url参数改变页面不刷新的解决办法


Posted in Javascript onMay 08, 2018

问题

今天在写页面的时候发现一个问题,就是在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的内容,这样就可以让组件重新被渲染。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
Bootstrap响应式表格详解
May 23 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
在Vuex中Mutations修改状态操作
Jul 24 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
angularjs实现的购物金额计算工具示例
May 08 #Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 #Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 #Javascript
node使用promise替代回调函数
May 07 #Javascript
node 使用 async 控制并发的方法
May 07 #Javascript
Angular 数据请求的实现方法
May 07 #Javascript
JavaScript数组去重算法实例小结
May 07 #Javascript
You might like
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python中字符串前面加r的作用
2015/06/04 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python实现人脸识别代码
2017/11/08 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Django的models中on_delete参数详解
2019/07/16 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
公积金转移接收函
2014/01/11 职场文书
工作鉴定评语
2014/05/04 职场文书
工地安全标语
2014/06/07 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
Pillow图像处理库安装及使用
2022/04/12 Python