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) //组件名称,导出该组件,保证在最外边

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏哈雷彗星撞地球

iOS 推送(本地推送)推送介绍总结使用步骤其他常用API

而在编程中,看过不如敲过,敲过不如理解,而很多代码的精髓要义,都是在我们写过很多遍之后就自然而然的理解了。

12540
来自专栏青玉伏案

iOS开发之抽屉效果实现

  说道抽屉效果在iOS中比较有名的第三方类库就是PPRevealSideViewController。一说到第三方类库就自然而然的想到我们的CocoaPods...

30160
来自专栏deepcc

弹出层高度不限垂直居中 兼容ie ff chrome

36790
来自专栏xx_Cc的学习总结专栏

iOS-控制器View的创建和生命周期

35860
来自专栏一“技”之长

iOS网络编程之三——NSURLConnection的简单使用

    在iOS7后,NSURLSession基本代替了NSURLConnection进行网络开发,在iOS9后,NSURLConnection相关方法被完全的...

8810
来自专栏進无尽的文章

基础篇-UIApplication、UIWindow以及程序的启动流程看我就够了

这篇文章主要介绍下有关UIApplication、UIWindow以及程序的启动流程,通过这篇文章,相信你会更加理解iOS 的应用启动过程以及app应用级别的相...

12920
来自专栏iOS开发日记

iOS开发系列——第一个iOS程序和运行过程

这里我想强调一下,前面的知识是你日后开发IOS的基础,没有那些知识你开发IOS会很痛苦,现在很多开发人员做开发都是一知半解,程序质量确实令人担忧,所以还是希望大...

41660
来自专栏Alice

ios 设置label的高度随着内容的变化而变化

<br> 好吧  步骤1:创建label _GeRenJianJie = [[UILabel alloc]init]; 步骤2:设置label _GeRenJi...

204100
来自专栏娱乐心理测试

iOS AppDelegate方法,监听进程在后台、被杀死事件

监听进程被杀死时,会发现, 程序处于前台被杀死时会调用applicationWillTerminate:方法,程序处于后台时,并不会调用,需要实现如下代码:

40820
来自专栏娱乐心理测试

iOS 如何把图片资源打包成bundle文件及遇到的坑(详解)

(1.)"Base SDK" 设置为 "Latest iOS (iOS 11.2)" (Xcode 9.2为例)

35820

扫码关注云+社区

领取腾讯云代金券