react如何监听路由url变化

"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.propsreturn (<div>You are now at {location.pathname}</div>
    )}
}export default withRouter(ShowTheLocation) //组件名称,导出该组件,保证在最外边

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365845.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 购物车程序_python_购物车程序

#需求1.启动程序后&#xff0c;让用户输入工资&#xff0c;然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后&#xff0c;检测余额是否够&#xff0c;够就直接扣款&#xff0c;不够就提醒 4.可随时退出&#xff0c;退出时&#xff0c;打印已购买商品和余额 #…

matlab tsai手眼标定程序代码_标定系列一 | 机器人手眼标定的基础理论分析

旷视MegMaster机器人系列是旷视自主研发的一系列AI智能机器人硬件设备&#xff0c;基于旷视全球领先的人工智能算法及机器人技术&#xff0c;可实现搬运、分拣、托举、存储等功能&#xff0c;被广泛应用于物流仓储、工厂制造等场景。旷视SLAM组主要负责多传感器建图、定位、标定…

Java8中的外观(JavaFX8)

JavaFX8在外观方面进行了一些更改 &#xff0c;其中最相关的是新CSS API &#xff0c;它允许您为控件以及已公开的Skin类创建新CSS属性和伪类。 使用CSS可以改变控件的很多外观&#xff0c;但是CSS只能实现很多功能&#xff0c;而这正是Skin类的用处。从“ UI控件体系结构”快…

600分理科选计算机专业,天津600分左右,计算机或电子信息专业,怎么选院校?...

原标题&#xff1a;天津600分左右&#xff0c;计算机或电子信息专业&#xff0c;怎么选院校&#xff1f;想学计算机或电子信息&#xff0c;一定是偏理选科对吧&#xff01;所谓的换算&#xff0c;是指的高考后出了全天津市不分文理的总排名后&#xff0c;如何换算成相当于天津市…

[TypeScript] Export public types from your library

If youre a library author, its useful to expose your public types as interfaces, to allow your consumers to extend them if needed. For example: To resolve the issues, we can do : // typings.d.tsinterface JQuery {hideChildren(): JQuery } 转载于:https://www.…

详解Asp.Net Core中的Cookies

目录 详解Asp.Net Core中的cookies搞懂cookiesAsp.Net中cookies的实现从http中获取cookies将cookies写入http中总结及感想详解Asp.Net Core中的cookies 搞懂cookies 我之前写过一篇文章来介绍cookies&#xff0c;如果你对cookies不是很了解请移步理解cookies这篇文章&#xff0…

为什么坚持使用JavaScript

由于JavaScript似乎征服了世界&#xff0c;因此与之相关的所有技术&#xff08;例如Node.js&#xff09;也开始兴起。 所有中间语言&#xff0c;包括TypeScript &#xff0c; CoffeeScript &#xff0c; ClojureScript和Google的Dart都已设定为目标&#xff0c;以使其更容易用J…

python tkinter选择路径控件_Python3 Tkinter选择路径功能的实现方法

效果基于Python3。 在自己写小工具的时候因为这个功能纠结了一会儿&#xff0c;这里写个小例子&#xff0c;供有需要的参考。 小例子&#xff0c;就是点击按钮打开路径选择窗口&#xff0c;选择后把值传给Entry输出。 效果预览 这是选择前&#xff1a;选择&#xff1a;选择后&a…

小程序在父组件执行子组件方法,可适用于下拉刷新上拉加载之后执行子组件方法

当父组件引用了子组件的时候&#xff0c;会遇到父组件执行子组件的方法&#xff0c;比如下拉刷新上拉加载等事件只有在页面中才能检测到&#xff0c;但是获取数据的方法在子组件&#xff0c;这时就可以执行子组件方法。 思路很简单&#xff0c;类似于vue中给子组件加ref执行子…

微型计算机接口与技术的交通灯,微机原理及接口技术课程设计交通灯

微机原理及接口技术课程设计交通灯序言十字道口的红绿灯是交通法规的无声命令&#xff0c;是司机和行人的行为准则。十字道口的交通红绿灯控制是保证交通安全和道路畅通的关键。当前&#xff0c;国内大多数城市正在采用“自动”红绿交通灯&#xff0c;它具有固定的“红灯—绿灯…

小米10pro使用说明书_华为Mate40、华为P40和小米10拍照对比:哪一款最好?

华为Mate 40 Pro、华为P40 Pro和小米10 Pro拍照对比&#xff1a;哪一款最好&#xff1f;华为Mate 40 Pro、小米10至尊纪念版、华为P40 Pro和小米10 Pro三款手机是在DxOMark上排名靠前的4部手机。而我们刚好拥有华为Mate 40 Pro、华为P40 Pro和小米10 Pro三款手机——作为同样搭…

xml和xml解析

1.简介XML XML 可扩展标记语言&#xff0c;传输数据 HTML超文本标记语言&#xff0c;显示数据 XML 文档声明 只能放在第一行&#xff0c;注释不能放在声明之前 <?xml version"1.0" encoding"UTF-8" standalone"no"?> standalone表示文…

JS中的同步异步问题

<script> /* * JS 是单线程 * 同步 异步 * 常见的异步 * 1、定时器 * 2、事件绑定 * 3、ajax请求&#xff08;一般的都是异步&#xff09; * 4、回调函数也可以理解成 异步 * */ var oDiv document.getElementById(div1); consol…

win8.1 计算机 桌面快捷方式,win8.1操作系统中我的电脑在哪里?win8.1我的电脑快捷键添加方法介绍...

很多刚刚接触win8的用户会发现&#xff0c;xp中的“我的电脑”&#xff0c;win7中的“计算机”&#xff0c;到了win8难道只有“资源管理器”了吗&#xff1f;开始菜单里边倒是有“计算机”&#xff0c;但是无法放到桌面。在最新版的win8.1中也是如此&#xff0c;大家会发现熟悉…

小程序修改数组中对象的某个值或者修改对象值

小程序中获取当前data定义的值&#xff0c;用this.data.xxx setData的时候要修改的值是不需要加this.data.xxx的&#xff0c;直接xxx, 一般直接修改data的值直接修改&#xff0c;修改数组中对象的值或者对象的属性值都要先转为字符串再加中括号&#xff0c;如果有变量可以用E…

mac你没有权限打开应用程序_如何管理Mac的隐私权限控制

在使用MAC电脑清理软件的时候&#xff0c;经常会出现需要权限问题&#xff0c;在没有权限的情况下&#xff0c;我们不能对一些文件进行更改和删除&#xff0c;那么该如何管理Mac的隐私权限控制呢&#xff1f;下面的文章就来告诉大家该如何设置隐身权限问题。第一步&#xff1a;…

Linux网卡绑定

很多情况下我们都需要用到网卡绑定这中情况&#xff0c;例如&#xff1a;大数据传输备份、网卡冗余。使用网卡绑定可以提高网络的传输速度&#xff0c;并且还能保证网络安全性&#xff0c;做到网卡的高可用&#xff0c;甚至可以节省IP地址。 网卡绑定模式 mode0&#xff1a;轮询…

c# 中通快递对接_快递共配是什么?行业前景怎么样?

首先了解快递共配是什么&#xff0c;随着快递市场竞争的加剧&#xff0c;降本增效成为快递网点越来越重视的方面&#xff0c;末端整合就成为快递网点普遍关注的一个焦点&#xff0c;即大家通常所说的共配。如何提升快递末端效率&#xff0c;一直都是快递企业比较关心的话题。不…

html中input字体加粗,更改checkboxGroupInput标签的字体标记(即粗体,斜体)

我正在用R中的Shiny创建一个Web应用程序。我有一个我在地图上绘制的数据集。使用checkboxGroupInput小部件&#xff0c;用户可以选择他们想要在地图上看到的类别(或不)。但是&#xff0c;数据集会随着时间而改变&#xff0c;并非所有类别都可用。为了清楚哪些在当前集合中可用&…

cglib:缺少的手册

字节码检测库cglib是许多众所周知的Java框架&#xff08;例如Hibernate &#xff08;现在不再 &#xff09;&#xff09;或Spring最受欢迎的选择&#xff0c;它们可以完成肮脏的工作。 字节码检测允许在Java应用程序的编译阶段之后操作或创建类。 由于Java类在运行时动态链接&a…