详解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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
红米手机抢购的js代码
Mar 10 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python中的取模运算方法
2018/11/10 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
五一劳动节活动总结
2015/02/09 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
以下牛机,你有几个
2022/04/05 无线电