"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. C++学习笔记44:继承与派生

    类的组合,类的继承 类的组合(汽车类,轮子类,此时可以把轮子类组合到汽车类:) 类的继承(交通工具类,汽车类,此时汽车类可以派生自交通工具类:) 组合:常用描述has a.. 继承:常用描述is a ...

  2. 简单的三道shell例题

    problem: 1. 输入一个ip列表文件,文件每行为以tab键分隔的两列,分别为一个ip段的起始ip和结束ip,ip均为点分形式.要求将该文件中各ip段包含的每一个有效ip以非点分形式输出到一个文 ...

  3. Codeforces Round #519 by Botan Investments

    Codeforces Round #519 by Botan Investments #include<bits/stdc++.h> #include<iostream> #i ...

  4. Linux学习笔记15—RPM包的安装OR源码包的安装

    RPM安装命令1. 安装一个rpm包rpm –ivh 包名“-i” : 安装的意思“-v” : 可视化“-h” : 显示安装进度另外在安装一个rpm包时常用的附带参数有:--force : 强制安装, ...

  5. 第二章 flex输入输出

    flex程序默认总是从标准输入读取, 实际上,词法分析程序都从文件读取输入 flex总是通过名为yyin的文件句柄读取输入, 下面的例子,我们修改单词计数程序,使得它能从文件读取输入 /* even ...

  6. Raspberry Pi GPIO Protection

    After damaging the GPIO port on our raspberry pi while designing a new solar monitoring system we de ...

  7. Mysql InnoDB 数据更新导致锁表

    一.数据表结构 CREATE TABLE `jx_attach` ( `attach_id` int(11) NOT NULL AUTO_INCREMENT, `feed_id` int(11) DE ...

  8. Revit API创建标注NewTag

    start ;             )                 {                     eId = item;                 }            ...

  9. MX4_ADB

    一.Ubuntu环境1. 建立或修改文件 ~/.android/adb_usb.ini,在文件开头或末尾添加一行,内容是0x2a45. 2. 建立或修改文件 /etc/udev/rules.d/51- ...

  10. anaconda3/lib/libcrypto.so.1.0.0: no version information available (required by wget)

    Solution: sudo ldconfig /lib/x86_64-linux-gnu/ #you need to use the libcrypto.so from /lib/x86_64-li ...