this.props.history.listen路由监听与取消监听

简介: 在React中使用`this.props.history.listen`进行路由变化监听,并在组件卸载时通过调用返回的函数取消监听,以避免不必要的回调执行或内存泄漏。

路由监听,我们可能会使用到this.props.history.listen;
使用:
在页面挂载完监听

componentDidMount() {
   
    this.props.history.listen(route => {
   
                //route 当前路由的属性
              //执行相应操作
               if (this.props.location.pathname !== route.pathname) {
   
                    // 路由发生了变化
                    }
           });
}
AI 代码解读

解绑listen事件:
事实上this.props.history.listen会返回一个函数,我们运行返回的这个函数即可销毁listen监听:

    UNLISTEN = null;
//listen
     componentDidMount() {
   
            this.UNLISTEN = this.props.history.listen(route => {
   
                 //执行相应操作
                  if (this.props.location.pathname !== route.pathname) {
   
                    // 路由发生了变化
                    }
            }); 
        }
//unlisten
    componentWillUnmount() {
   
        this.UNLISTEN && this.UNLISTEN()
    }
AI 代码解读
目录
打赏
0
相关文章
|
2月前
|
UED
Bootstrap5 滚动监听(Scrollspy)2
Bootstrap5 滚动监听(Scrollspy)插件能自动更新导航目标,随滚动条位置变化而动态调整。示例中,垂直导航栏随页面滚动实时高亮对应部分,如“Navbar Item 1”、“Item 2”等,提升用户体验。
Bootstrap5 滚动监听(Scrollspy)1
Bootstrap5 滚动监听(Scrollspy)插件可自动更新导航目标,根据滚动条位置变化。通过在目标元素(如 body)添加 `data-bs-spy="scroll"` 和 `data-bs-target` 属性,关联导航栏与可滚动区域,确保导航项的 id 与链接匹配。可选设置 `data-bs-offset` 偏移量,默认10px。使用时需将元素的 CSS position 设为 "relative"。
|
4月前
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
本文介绍了如何在Twaver-HTML5中监听网络视图操作事件,包括视图绘制、鼠标事件以及获取鼠标下的网元等。
48 1
Twaver-HTML5基础学习(30)监听事件_network绘制监听_network视图操作监听_鼠标事件的监听
|
3月前
|
API
Harmony 状态监听 @Monitor和@Computed
Harmony 状态监听 @Monitor和@Computed
63 0
Watch监听器的写法,与data平级,可以赋予username新值和旧值,可以监听用户名是否可用,立即调用侦听器,watch同级username:{},immediate:true,对象无,deep
Watch监听器的写法,与data平级,可以赋予username新值和旧值,可以监听用户名是否可用,立即调用侦听器,watch同级username:{},immediate:true,对象无,deep
|
8月前
监听开机广播
监听开机广播
48 1
|
8月前
v-on监听多个方法
v-on监听多个方法
47 0
|
8月前
|
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
149 0
|
8月前
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
当监听的属性是对象的引用时,`watch`选项是否会触发监听?
43 2
|
8月前
v-on能否监听多个事件?
v-on能否监听多个事件?
103 0