"componentWillReceiveProps"
"shouldComponentUpdate"
"componentWillUpdate"
"render"
"componentDidUpdate"

使用这些生命周期钩子可以监听到路由相同,参数不同的变化,但是监听不到完全不相同的url的变化。即使路由不同,componentDidMount组件内容所更新的东西变了,但是代码变了,页面没有变,找到了一种方法。withRouter

参考:https://reacttraining.com/react-router/web/api/withRouter

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router' // A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
} render() {
const { match, location, history } = this.props return (
<div>You are now at {location.pathname}</div>
)
}
} export default withRouter(ShowTheLocation) //组件名称,导出该组件,保证在最外边

react如何监听路由url变化的更多相关文章

  1. angular的路由和监听路由的变化和用户超时的监听

    先看两篇博客:http://camnpr.com/javascript/1652.html 这一篇博客是重点中的重点:                   http://www.tuicool.com ...

  2. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  3. ionic 监听路由事件变化

    (function(){ angular.module("cakeStore", ["ngRoute", "ionic","coo ...

  4. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  5. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

  6. vue-watch监听路由的变化

  7. jQuery hashchange监听浏览器url变化

    $(window).bind('hashchange', function() { // });

  8. vue3 监听路由($route)变化

      setup() {      // ...   },   watch: {     $route(m, n) {       console.log('mm', m)       console. ...

  9. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

随机推荐

  1. JavaScript ES6特性

    ES6 核心特性 块级作用域 let : 声明的变量存在块级作用域  不会声明提前 ES5 // ES5 // 声明提前 var x = 'outer'; function test(inner) { ...

  2. js实现截取或查找字符串中的子字符串

    获取 答案: var string0="sss.sscdyfasdfdgfg";//sscdy获取 ,); 答案是采用substr方法. 定义和用法:substr方法用于返回一个从 ...

  3. Object类--toString方法

    toString()方法 1.在Object类中定义toString()方法的时候返回对象的哈希code码(对象地址字符串) 直接输出对象: 2.可以通过重写toString()方法表示出对象的属性之 ...

  4. [原创]H5前端性能测试工具介绍

    [原创H5前端性能测试工具介绍 一 网络抓包工具 网络抓包工具选择原则,可以捕获网络请求,抓取具体请求信息流,同时可以针对网络请包进行修改或拦截: 1.Fiddler(推荐) 2.Charles(推荐 ...

  5. 将远程git仓库里的指定分支拉取到本地(本地不存在的分支

    将远程git仓库里的指定分支拉取到本地(本地不存在的分支) https://www.cnblogs.com/hamsterPP/p/6810831.html

  6. 《西部世界》S2E9:蝶化庄周,浮生若梦

    原以为第九集能解开本季大半的疑惑,结果还是被骗了……看来<西部世界>铁了心要把主要秘密都放在大结局里揭晓,大家就再等一周吧. 尽管如此,本集还是说清了不少谜团:比如威廉和格蕾丝的真实身份, ...

  7. pkg-config命令的Makefile.am

    举例:通过Makefile调用pkg-config命令. pkg-config - Return metainformation about installed libraries (为了使用lib库 ...

  8. Windows上的git、github部署及基本使用方法

    1.介绍 Git是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本 ...

  9. redis启动出错Creating Server TCP listening socket 127.0.0.1:6379: bind: No error

    windows下安装Redis第一次启动报错: [2368] 21 Apr 02:57:05.611 # Creating Server TCP listening socket 127.0.0.1: ...

  10. 【Java】MyBatis与Spring框架整合(二)

    本文讲解 Spring 注入映射器及事务功能的实现. 注入映射器实现 MyBatis 可以使用 SqlSession 的 getMapper ( Class<T> type ) 方法,根据 ...