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 ...
随机推荐
- 使用 P6Spy 来格式化 SQL 语句,支持 Hibernate 和 iBATIS
事情起因 在处理一个查询小功能的时候,自认为 SQL 语句和传参均正确,然而查询结果无匹配数据,在查看 Hibernate 自带 SQL 语句输出的时候带着问好感觉有点不爽,特别是想复制 SQL 语句 ...
- Xshell 连接 CentOS 7 与 Ubuntu Server
操作系统:windows 7 应用软件:Ware Workstation & Xshell 5 Linux:CentOS 7 Minimal & Ubuntu Server 16 == ...
- spring源码分析系列
spring源码分析系列 (1) spring拓展接口BeanFactoryPostProcessor.BeanDefinitionRegistryPostProcessor spring源码分析系列 ...
- POIUtil
package com.util.poi; import java.io.ByteArrayOutputStream; import java.io.IOException; import java. ...
- Facebook's React vs AngularJS: A Closer Look
When we launched React | A JavaScript library for building user interfaces two weeks ago there were ...
- linux命令行下修改系统时间、时区
date查看时间以及时区 图a是est时区,和HONGkong时间查了一个小时. # 保存设置$ sudo mv /etc/localtime /etc/localtime.old # 设置时区 $ ...
- conda虚拟环境
https://blog.csdn.net/lyy14011305/article/details/59500819 1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是 ...
- 如何用C#动态编译、执行代码
在开始之前,先熟悉几个类及部分属性.方法:CSharpCodeProvider.ICodeCompiler.CompilerParameters.CompilerResults.Assembly. 一 ...
- 第十五章 dubbo结果缓存机制
dubbo提供了三种结果缓存机制: lru:基于最近最少使用原则删除多余缓存,保持最热的数据被缓存 threadlocal:当前线程缓存 jcache:可以桥接各种缓存实现 一.使用方式 <du ...
- Web 安全 之 OpenSSL
什么是OpenSSL协议? SSL(Secure SocketLayer,安全套接层)协议是使用最为普遍网站加密技术,用以保障在Internet上数据传输之安全,利用数据加密(Encryption)技 ...