今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是不会更新的,这也算是react-router的一个设计缺陷吧
发现网上的解决方法主要有两种
一、先跳转到一个与当前页面不仅仅是路由参数不同的页面,然后再跳转回来,这样路由跳转了两次。如下所示:
this.props.history.push('/empty'); // 空白页面
setTimeout(() => {
this.props.history.replace(`/hello/${id}`); // 要跳转的页面,其中id为参数
});

但是这样的话白白加载了一个页面,个人感觉不是很好

二、第二种方法是使用 componentWillReceiveProps(newProps) 函数,当 props 改变时,我们就可以在该函数中通过 newProps.match.params.id 拿到新的url参数,进而进行更新。如下
componentWillReceiveProps(newProps) {
const id = newProps.match.params.id;
// 一些操作
}
我个人比较喜欢这种方法
但是如果使用这种方法的话,需要注意的一点是:我们可能在react中使用的的组件不止一个,需要执行 componentWillReceiveProps 方法的组件可能是作为子组件存在的。也就是说react-router直接作用的组件是使用 componentWillReceiveProps 组件的父组件
这个时候路由参数的改变是监测不到的,为了能够监测到,需要在父组件中把 props 传给子组件,就像这样
<Route path="/hello/:id" component={MyHome} />

export default class MyHome extends React.Component {
constructor(props) {
super(props);
this.state = {
};
} render() {
return (
// react-router当url参数改变时不能自动更新页面,为了url参数改变时能够自动更新
// 在子组件中使用componentWillReceiveProps(),当props改变时会自动调用该函数
// 但是现在url的参数是直接作用在page(当前页面组件)上的,为了让子组件监测到props
// 的变化,将props全部传给子组件
<UserInfo {...this.props} />
);
}
} export default class UserInfo extends React.Component {
constructor(props) {
super(props);
this.state = {};
} componentWillReceiveProps(newProps) {
const id = newProps.match.params.id;
//一些操作
} render() {
return (
<div className="userinfo-container">
</div>
);
}
}
如有错误,欢迎留言指出

参考:

https://www.cnblogs.com/gdsblog/p/7348375.html
https://segmentfault.com/q/1010000010522122
http://www.shenyujie.cc/2018/03/04/reactRouter_v1/

react-router url参数更新 但是页面不更新的解决办法的更多相关文章

  1. asp.net中URL参数传值中文乱码的三种解决办法

    在做Asp.Net开发的时候,参数传递中文时,经常会遇到页面乱码的问题,下面是在网上收集的相关资料,请大家参考: 解决的方法一般有3种: 1.设置web.config文件 <system.web ...

  2. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  3. hexo创建的tags和categories页面为空的解决办法

    title: hexo创建的tags和categories页面为空的解决办法 toc: false date: 2018-04-16 02:26:10 主题:landscape 添加type以及men ...

  4. URL参数带加号“+”AJAX传值失败的解决方法

    URL中参数的值有加号,虽然请求的URL中含有加号,但是GET的时候却得不到加号! 解决办法,用JavaScript的encodeURIComponent函数对加号进行编码. 如str="a ...

  5. [转]Linux df 命令不更新磁盘数据空间使用情况的解决办法

    当你已经找出并remove掉Linux系统中的大容量文件时,然后使用df -h查看使用情况依旧不变时.可尝试如下方法解决 1.找出那个进程占用了哪些已删除的文件 # 查看哪些被文件还在被哪个进程占用 ...

  6. tk.mybatis通用插件updateByPrimaryKeySelective无法自动更新ON UPDATE CURRENT_TIMESTAMP列的解决办法

    tk.mybatis是一个很好用的通用插件,把CRUD这些基本的数据操作全都用动态SQL语句自动生成了,mapper和xml里十分清爽,但是昨天发现有一个小坑,记录在此: 有一张表,结构如下(已经简化 ...

  7. React 获取 url 参数 —— this.props.match

    在 react 组件的  componentDidMount 方法中打印一下 this.props,在浏览器控制台中查看输出如下: 其中页面的 url 信息全都包含在 match 字段中,以地址 lo ...

  8. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  9. vue 路由参数变化,页面不更新的问题

    监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为  /p ...

随机推荐

  1. spring注解不支持静态变量注入

    spring注解不支持静态变量注入:今天敲代码  自动配置 配置: Animal.java package study01_autoconfig.beanConfig; import org.spri ...

  2. Jquery事件和选择器 纠错

    1: 试题分析:该题考的是jQuery中事件绑定的知识.绑定事件用bind()方法,选项A是正确的绑定事件语法,因此是正确的答案.选项BCD的语法是错误的. 2: 试题分析:opacity 必需.规定 ...

  3. mysql主从配置详解(图文)

    最近工作不是很忙,把以前整理的mysql数据库的主从配置过程记录一下,有不足之处,请各位多多纠正指教 #环境配置#master IP:192.168.46.137 slave IP:192.168.4 ...

  4. 2019牛客多校训练第三场H.Magic Line(思维)

    题目传送门 大致题意: 输入测试用例个数T,输入点的个数n(n为偶数),再分别输入n个不同的点的坐标,要求输出四个整数x1,y1,x2,y2,表示有一条经过点(x1,y1),(x2,y2)的直线将该二 ...

  5. azure k8s netcore 程序初次部署

    以下都是我在2018年12月份做的实验,今天才发布出来. 念想 首先是了解一些关于K8s的一些基础概念,推荐查看一下这个链接,非常适合入门k8s.是因为K8S的环境搭建比较复杂(最主要是懒),其实也有 ...

  6. SAP 修改MIRO变式

    转自:http://blog.vsharing.com/SAP100/A799545.html

  7. 编程使用c#连接到IBM db2的两种方式

    一:使用c#通过odbc连接到IBM db2使用 ConnectionString 属性连接到各种数据源. 部署:只要在客户端安装IBM DB2 ODBC driver.配置DSn即可. 1):可以单 ...

  8. python(自用手册)三

    第三章 基础 3.1编码初识 ascii 256字母没有中文 一个字节 8位 gbk 中国 中文2字节 16位 英文1字节8位 unicode 万国码 前期 2字节 8位 后期变成4个字节 32位 u ...

  9. Kafka 原理和实战

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语 ...

  10. Android UI控件常用库汇总

    现在App的开发已经是非常成熟,涌现了一大批开源的工具.这些项目能够提高我们的搬砖效率.以下是一些在开发中比较常使用的控件和库. ListView WaveSwipeRefreshLayout 水滴效 ...