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 ...
随机推荐
- Oracle 11g透明网关连接Sqlserver 2000(转)
Oracle 11g透明网关连接Sqlserver 2000: http://www.cnblogs.com/lightnear/archive/2013/02/03/2890858.html 透明网 ...
- react-native开源组件react-native-wechat学习
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-open-source-components-r ...
- Oracle 11g不同情形下的登录分析
对于Oracle刚開始学习的人.甚至有些经验的Oracle DBA来说,Oracle的账户登录问题往往非常棘手.即便成功登录oracle也是知其然而不知其所以然. 作者经过系统学习和重复实践,本着打破 ...
- Knockout.Js官网学习(options绑定)
前言 options绑定控制什么样的options在drop-down列表里(例如:<select>)或者 multi-select 列表里 (例如:<select size='6' ...
- FPGA系列之一:Cyclone V中的时钟资源
之前的项目中更多的是有师兄提供经验和帮助,追求的是快速上手,所以不管对于硬件电路设计,还是verilog电路编程,甚至是FPGA内部的资源,都没来得及系统地学习,最近在做算法到电路的实现,正好系统学习 ...
- STM32 F103 F407 F429 F767对比图
- ionic 001
安装和穿件app npm install -g cordova ionic 使用模板创建app ionic start myApp blank ionic start myApp tabs ionic ...
- DataGuard---->备库参数db_file_name_convert和log_file_name_convert的作用
一.参数说明 [1] db_file_name_convert db_file_name_convert 主数据库和备用数据库的数据文件转换目录对映(如果两数据库的目录结构不一样),如果有多个对映,逐 ...
- V-rep学习笔记:机器人路径规划2
路径规划问题是机器人学研究的一个重要领域,它是指给定操作环境以及起始和目标的位置姿态,要求选择一条从起始点到目标点的路径,使运动物体(移动机器人或机械臂)能安全.无碰撞地通过所有的障碍物而达到目标位置 ...
- WCF兼容WebAPI输出Json格式数据,从此WCF一举两得
问题起源: 很多时候为了业务层调用(后台代码),一些公共服务就独立成了WCF,使用起来非常方便,添加服务引用,然后简单配置就可以调用了. 如果这个时候Web站点页面需要调用怎么办呢? 复杂的XML , ...