"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. Leaflet_创建地图(2017-10-20)

    包含官网的1,3个示例 可以直接运行 <!DOCTYPE html> <html> <head> <title>leaflet</title> ...

  2. Android笔记(六):线程及线程通信

    线程 由于Android的Activity中默认所有代码都在主线程(UI线程)中执行,如果在这里面执行耗时任务(例如下载),界面就会无反应且不可操作,直到耗时任务执行完毕. 如果想在执行耗时任务的同时 ...

  3. poj 1184

    经典的宽搜题目,感觉最好的办法应该是双向广搜. 不过用简单的启发式搜索可以飘过. #include <iostream> #include <cstdio> #include ...

  4. [Java web]Spring+Struts2+Hibernate整合过程(2)

    摘要 上篇文章介绍了一种整合方式,不妨就叫做有hibernate配置文件的方式,这里介绍一种不用hibernate.cfg.xml的一种配置方式,为了方便,就仍在上篇的demo中,继续修改了. 步骤 ...

  5. centos 6.4配置samba+ldap认证

    原文地址:http://www.centoscn.com/image-text/config/2015/0716/5866.html  1. 什么是samba Samba服务类似于windows上的共 ...

  6. Linux 操作 oracle 数据库

    1.Oracle监听启动命令:lsnrctl start 2.   sqlplus 登录数据库 3.OS版本及Oracle版本 select banner from v$version; 4.查询该数 ...

  7. Shiro基础知识03----shiro授权(编程式授权),Permission详解,授权流程(zz)

    授权,也叫访问控制,即在应用中控制谁能访问哪些资源(如访问页面/编辑数据/页面操作等).  在权限认证中,最核心的是:主体/用户(Subject).权限(Permission).角色(Role).资源 ...

  8. 【T02】理解子网和CIDR的概念

    1.IP地址分为5类,A.B.C.D.E,它们的前缀分别是: A:0 网络个数2^7,主机个数2^24,大概1千6百万 B:10 网络个数2^14,大概1万6千,主机个数2^16,大概6万5千 C:1 ...

  9. 关于Python ,requests的小技巧

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/xie_0723/article/details/52790786 关于 Python Request ...

  10. [Python设计模式] 第2章 商场收银软件——策略模式

    github地址: https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序, 模拟商场收银软件,根据客户购买商品的单价和数量,计 ...