详解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 相关文章推荐
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
DOM 事件流详解
Jan 20 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
jQuery实现日历效果
Sep 11 jQuery
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和MySQL保存和输出图片
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
js实现数组转换成json
2015/06/26 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
python开根号实例讲解
2020/08/30 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
物流专业大学的自我评价
2014/01/11 职场文书
部队领导证婚词
2014/01/12 职场文书
设计顾问服务计划书
2014/05/04 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
英语复习计划
2015/01/19 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
生日赠语
2015/06/23 职场文书
运动会通讯稿200字
2015/07/20 职场文书