详解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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
vue循环数组改变点击文字的颜色
Oct 14 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
IStream与TStream之间的相互转换
2008/08/01 PHP
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
PHP速成大法
2015/01/30 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
PHP实现简单登录界面
2019/10/23 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
护理专业的自荐信
2013/10/22 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
幼儿园辞职书
2015/02/26 职场文书
告知书格式
2015/07/01 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
图文详解nginx日志切割的实现
2022/01/18 Servers
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers