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.props return (
<div>You are now at {location.pathname}</div>
)
}
} export default withRouter(ShowTheLocation) //组件名称,导出该组件,保证在最外边
react如何监听路由url变化的更多相关文章
- angular的路由和监听路由的变化和用户超时的监听
先看两篇博客:http://camnpr.com/javascript/1652.html 这一篇博客是重点中的重点: http://www.tuicool.com ...
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- ionic 监听路由事件变化
(function(){ angular.module("cakeStore", ["ngRoute", "ionic","coo ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- vue-watch监听路由的变化
- jQuery hashchange监听浏览器url变化
$(window).bind('hashchange', function() { // });
- vue3 监听路由($route)变化
setup() { // ... }, watch: { $route(m, n) { console.log('mm', m) console. ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
随机推荐
- swoole深入学习 3. upd Server和udp Client
前面主要讲了tcp得server和client的业务处理,tcp有三次握手,有连接的概览,而UDP服务器与TCP服务器不同,UDP没有连接的概念.启动Server后,客户端无需Connect,直接可以 ...
- The type javax.servlet.http.HttpServletRequest cannot be resolved. It is indirectly referenced from required .class files
我的方法:是缺少servlet的引用库,解决如下 1.工程右键-properties->java build path 2.在java build path的libraries tab页中选择A ...
- C++调用matlab函数
C++与matlab混合编程——C++调用MATLAB函数 笔者最近在从事一个MFC相关的项目,要求将用Matlab实现的算法通过应用MFC制作成一个小应用.其中有一部分内容需要求一个多元函数的最值. ...
- ELASTIC API
运维常用API. curl -XGET 'localhost:9200/_cat/indices?v&pretty' #查看索引 curl -XGET 'localhost:9200/_cat ...
- 外卖ERP管理系统(二)
京门时代旗下外卖ERP管理系统是一款专注外卖行业的解决方案系统! 系统介绍: 1.外卖erp系统是一款集订单分发.一键派送.实时大屏监控.店铺进销存.仓储管理及数据分析为一体的智能化外卖管理系统.已服 ...
- Android开发中遇到的问题(二)——新建android工程的时候eclipse没有生成MainActivity和layout布局
一.新建android工程的时候eclipse没有生成MainActivity和layout布局 最近由于工作上的原因,开始学习Android开发,在入门的时候就遇到了不少的坑,遇到的第一个坑就是&q ...
- js处理时间时区问题
问题背景:服务器时间是东八区时间,页面会在全世界各地,页面 JS 功能需要对比服务器时间和用户本地时间,为兼容世界各地时间,需要将用户本地时间转换为东八区时间 一.基本概念 1.格林威治时间 格林威治 ...
- SimpleCaptcha生成图片验证码内容为乱码
转自:https://blog.csdn.net/wlwlwlwl015/article/details/51482065 前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作 ...
- 未能找到temp\select2.cur的一部分
环境 操作系统:win10 家庭普通版本 x64 账户类型:管理员 SuperMap:9D 打开自定义的应用程序时,会报错:未能找到路径"C:\Users\user\AppData\Loca ...
- 基于Python使用Redis的一些想法和建议
目录 1关于Redis使用的一点想法 1.1进行缓存前,需考虑 1.2进行缓存后,需考虑 1.3缓存使用一段时间后 2编写Redis数据库层规范建议 2.1选择适合的redis客户端 2.2规范化定义 ...