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 ...
随机推荐
- django常用命令
model 创建表的命令 (1): python manage.py makemigrations (2): python manage.py migrate 创建一个project项目 django ...
- saltstack 命令2
在Salt主机上,可以快速查看所有Salt minion连接,并查看连接是否被接受,拒绝或挂起 [root@node1 ~]# salt-key -L 接受所有的key [root@node1 ~]# ...
- Maven学习总结(11)——Maven Tomcat7自动部署
1.配置tomcat-users.xml文件 在tomcat安装目录下找到tomcat-users.xml文件.该文件路径为[tomcat安装根目录]/conf/ 修改文件内容,增加下列内容: < ...
- [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
- Kubernetes中的亲和性与反亲和性
通常情况下,Pod分配到哪些Node是不需要管理员操心的,这个过程会由scheduler自动实现.但有时,我们需要指定一些调度的限制,例如某些应用应该跑在具有SSD存储的节点上,有些应用应该跑在同一个 ...
- Java中的语法糖
一.范型 1. C#和Java范型的区别 在C#中范型是切实存在的,List<int>和List<String>就是两种不同的类型,它们在系统运行期间生成,有自己的虚方法表和类 ...
- CUDA_ERROR_OUT_OF_MEMORY
E tensorflow/stream_executor/cuda/cuda_driver.cc:1002] failed to allocate 198.83M (208486400 bytes) ...
- Android HandlerThread 源代码分析
HandlerThread 简单介绍: 我们知道Thread线程是一次性消费品,当Thread线程运行完一个耗时的任务之后.线程就会被自己主动销毁了.假设此时我又有一 个耗时任务须要运行,我们不得不又 ...
- python2判断编码格式
def getCoding(strInput): ''' 获取编码格式 ''' if isinstance(strInput, unicode): return "unicode" ...
- 《Unix&Linux大学教程》学习笔记6——Unix文件系统
1:Unix文件类型——3种 普通文件(常规文件):文本文件(纯文本.脚本.源程序.配置文件.html等).二进制文件(多媒体文件.数据库等) 目录:用于组织文件 伪文件:不存储数据,目的是提供一种服 ...