详解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 相关文章推荐
JS链式调用的实现方法
Mar 07 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
js实现登录验证码
Dec 22 Javascript
vue之nextTick全面解析
May 17 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
浅谈vuex中store的命名空间
Nov 08 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
杏林同学录(九)
2006/10/09 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
javascript面向对象创建对象的方式小结
2019/07/29 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
python实现基本进制转换的方法
2015/07/11 Python
python线程池threadpool使用篇
2018/04/27 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
小小商店教学反思
2014/04/27 职场文书
2015年班组长工作总结
2015/04/10 职场文书
圣诞晚会主持词
2015/07/01 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫