详解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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
jquery实现图片预加载
Dec 25 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
node thread.sleep实现示例
Jun 20 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php如何连接sql server
2015/10/16 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
公司财务工作总结的自我评价
2013/11/23 职场文书
银行工作检查书范文
2014/01/31 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
出生证明格式
2015/06/15 职场文书
诚信考试主题班会
2015/08/17 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript