1. "componentWillReceiveProps"
  2. "shouldComponentUpdate"
  3. "componentWillUpdate"
  4. "render"
  5. "componentDidUpdate"

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

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

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import { withRouter } from 'react-router'
  4.  
  5. // A simple component that shows the pathname of the current location
  6. class ShowTheLocation extends React.Component {
  7. static propTypes = {
  8. match: PropTypes.object.isRequired,
  9. location: PropTypes.object.isRequired,
  10. history: PropTypes.object.isRequired
  11. }
  12.  
  13. render() {
  14. const { match, location, history } = this.props
  15.  
  16. return (
  17. <div>You are now at {location.pathname}</div>
  18. )
  19. }
  20. }
  21.  
  22. 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. django常用命令

    model 创建表的命令 (1): python manage.py makemigrations (2): python manage.py migrate 创建一个project项目 django ...

  2. saltstack 命令2

    在Salt主机上,可以快速查看所有Salt minion连接,并查看连接是否被接受,拒绝或挂起 [root@node1 ~]# salt-key -L 接受所有的key [root@node1 ~]# ...

  3. Maven学习总结(11)——Maven Tomcat7自动部署

    1.配置tomcat-users.xml文件 在tomcat安装目录下找到tomcat-users.xml文件.该文件路径为[tomcat安装根目录]/conf/ 修改文件内容,增加下列内容: < ...

  4. [Android Pro] 完美解决 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

    原文:https://blog.csdn.net/qq_24118527/article/details/82867864

  5. Kubernetes中的亲和性与反亲和性

    通常情况下,Pod分配到哪些Node是不需要管理员操心的,这个过程会由scheduler自动实现.但有时,我们需要指定一些调度的限制,例如某些应用应该跑在具有SSD存储的节点上,有些应用应该跑在同一个 ...

  6. Java中的语法糖

    一.范型 1. C#和Java范型的区别 在C#中范型是切实存在的,List<int>和List<String>就是两种不同的类型,它们在系统运行期间生成,有自己的虚方法表和类 ...

  7. CUDA_ERROR_OUT_OF_MEMORY

    E tensorflow/stream_executor/cuda/cuda_driver.cc:1002] failed to allocate 198.83M (208486400 bytes) ...

  8. Android HandlerThread 源代码分析

    HandlerThread 简单介绍: 我们知道Thread线程是一次性消费品,当Thread线程运行完一个耗时的任务之后.线程就会被自己主动销毁了.假设此时我又有一 个耗时任务须要运行,我们不得不又 ...

  9. python2判断编码格式

    def getCoding(strInput): ''' 获取编码格式 ''' if isinstance(strInput, unicode): return "unicode" ...

  10. 《Unix&Linux大学教程》学习笔记6——Unix文件系统

    1:Unix文件类型——3种 普通文件(常规文件):文本文件(纯文本.脚本.源程序.配置文件.html等).二进制文件(多媒体文件.数据库等) 目录:用于组织文件 伪文件:不存储数据,目的是提供一种服 ...