关于setRouteLeaveHook无法使用时的替代方案registerTransitionHook

简介:
背景:首先说明下,这个问题很奇怪,花了整整一天在google上搜了一圈没有结果,深夜加班到10:30还是没有效果。但是进度在一点点往前走,并且确认解题大方向没有问题所以也一直没有放弃。下面介绍下具体问题:

钩子:我们知道react\Router中有一个路由钩子,这个钩子可以针对某个组件(父或子)在遇到具体事件时触发回调,相当于拦截事件触发做内置于钩子hook中的方法。

需求:切换路由时触发钩子进行用户提示是否离开目前路由

方案(google):

componentDidMount(){
this.props.router.setRouteLeaveHook(
            this.props.route,
            this.routerWillLeave
        )
}
routerWillLeave(nextLoac) {
        return "you sure you want to leave?" ;
}

另外需要注意的是:router的注入,withRouter对router的组装之类的,这个google上都有,这里只说我遇到的问题,目前为止在google上还没有被发现

一通操作猛如虎,一看结果惊呆了,始终没有效果,打了console一直没法进入钩子函数routerWillLeave,经过不断尝试之后发现一个问题:在不刷新的情况下改变本js任何代码哪怕多一个或少一个空格然后编译,效果就出来了。一直不太明白到底什么原因,如果有看到的大神麻烦解释下,谢谢。

后来在一次意外中发现router里面还有个registerTransitionHook,之所以注意到这个是因为在debug上面代码时发现出效果的情况会进入到一个叫transitionHook的方法,所以我想如果不用setRouteLeaveHook直接使用registerTransitionHook是不是会达到同样的效果,因为我用的是antd-react-dva一套,而router已经被dva封装了一层,担心之所以setRouteLeaveHook没有是因为这个原因,所以就在google registerTransitionHook。一搜一个准,https://github.com/ReactTraining/history/issues/14这个大神说他就是用这个来实现我想要的效果的,但是人家是用history,dva里面history从哪来?直接从父组件传递下来应该就可以了,但是因为router里面就有这个方法,何必使用history,果断把history改为this.props.router测试一把,搞定。

效果是有了,另外把google大神其他的助攻随便说下吧,避免你们再找来找去了。此处会有一个小bug,你切换任何一个路由都会有弹框,怎么办?在componentWillUnmount里面使用unregisterTransitionHook方法把钩子撤销掉,但是需要注意:必须是同一个钩子,怎么做?在constructor里面绑定就好


constructor(props) {
        super(props);
        this.routerWillLeave = this.routerWillLeave.bind(this)
    }

 //离开该页面时删除该监听事件
    componentWillUnmount() {
   this.props.router.unregisterTransitionHook(this.routerWillLeave)
    }

因为太激动了,所以写下这边博文以作纪念,哈哈
相关文章
EMQ
|
存储 网络协议 IDE
如何在 Java 中使用 MQTT
本文主要介绍如何在Java项目中使用MQTT,实现MQTT客户端与服务器的连接、订阅和收发消息等功能。
EMQ
2061 0
如何在 Java 中使用 MQTT
|
8月前
|
SQL 自然语言处理 数据库
【Azure Developer】分享两段Python代码处理表格(CSV格式)数据 : 根据每列的内容生成SQL语句
本文介绍了使用Python Pandas处理数据收集任务中格式不统一的问题。针对两种情况:服务名对应多人拥有状态(1/0表示),以及服务名与人名重复列的情况,分别采用双层for循环和字典数据结构实现数据转换,最终生成Name对应的Services列表(逗号分隔)。此方法高效解决大量数据的人工处理难题,减少错误并提升效率。文中附带代码示例及执行结果截图,便于理解和实践。
226 4
|
Docker 容器
docker:记录如何在x86架构上构造和使用arm架构的镜像
为了实现国产化适配,需将原x86平台上的Docker镜像转换为适用于ARM平台的镜像。本文介绍了如何配置Docker buildx环境,包括检查Docker版本、安装buildx插件、启用实验性功能及构建多平台镜像的具体步骤。通过这些操作,可以在x86平台上成功构建并运行ARM64镜像,实现跨平台的应用部署。
8883 3
|
安全 Java 程序员
shiro学习三:shiro的源码分析
这篇文章是关于Apache Shiro安全框架的源码分析,主要探讨了Shiro的认证流程和自定义Realm的实现细节。
239 0
shiro学习三:shiro的源码分析
|
人工智能 自然语言处理 云计算
软件开发的最新趋势和未来展望
软件开发领域正处于快速发展的阶段,不断涌现出新的技术和方法。从人工智能、云计算到低代码开发,这些趋势都在推动着软件开发的革新和创新。未来,随着技术的不断进步,我们可以期待更多令人激动的变革和机遇。无论是开发者还是业务,都应该保持敏锐的洞察力,及时采纳新技术,以适应不断变化的软件开发领域。
757 1
软件开发的最新趋势和未来展望
|
JSON JavaScript 数据格式
Thymeleaf 获取model中的值和JS获取Model中的数据
Thymeleaf 获取model中的值和JS获取Model中的数据
407 0
|
Ubuntu Java 机器人
GPT3.5接入企业微信,可连续对话
小伙伴们,之前接的GPT接口都是3.0,并不是真正的GPT。废话少说,先来看看效果,这次最大的不同是能连续对话了
526 0
GPT3.5接入企业微信,可连续对话
|
数据采集 Python
一步教会你如何获取1688商品详情
在当今的互联网时代,获取信息的方式和数量都呈现出爆炸式增长。这其中,商品详情作为重要的信息来源,对于许多人来说都是一项必要的任务。1688作为中国知名的B2B平台,拥有海量的商品信息。本文将通过简单的步骤教你如何获取1688商品详情。
|
Android开发
泼辣修图2023最新版功能介绍及使用教程
看了看后台管理,发现修图软件比较受大家欢迎,所以今天我打算在更新一个修图软件泼辣修图!泼辣修图是一款深受用户喜爱的修图软件,所以今天为大家推荐这款修图APP,经过汉化,所有滤镜和工具都能免费用,无任何的廣搞! 无论你是入门新手还是摄影专家,泼辣修图都可以满足你的一切需求。对于入门新手而言,泼辣修图搭载的先进自动增强工具和富有创意的图像滤镜,可以帮助他们快速雕琢图像的每一个细节。对于摄影专家而言,图层混合、局部调整、曲线工具等等功能则是他们青睐有加的专业特性。
929 0