关于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)
    }

因为太激动了,所以写下这边博文以作纪念,哈哈
相关文章
|
3月前
|
测试技术
优化if-else的11种方案
优雅编码不仅提升程序效率,也增进代码可读性与维护性。通过早返回减少嵌套逻辑、运用三元运算符简化条件判断、采用`switch-case`优化多分支结构、实施策略模式灵活应对不同情境、利用查找表快速定位处理方式、封装函数明确职责划分、应用命令模式解耦操作与调用、引入状态模式管理复杂状态变化、重构条件表达式以增强清晰度、运用断言确保前提条件、及合理异常处理等十大技巧,使代码更加精炼与优雅。
67 4
优化if-else的11种方案
|
1月前
|
编解码 前端开发 UED
多屏幕适配方案
【10月更文挑战第7天】
40 1
|
3月前
|
弹性计算 应用服务中间件 持续交付
阿里云应用方案
为拥有传统单体和微服务架构混合的电商企业提供阿里云应用方案。该方案利用阿里云服务器迁移中心(SMC)实现IDC服务器到ECS的快速自动迁移,并通过云效建立自动化部署流水线。微服务应用则采用企业级分布式应用服务EDAS进行无缝迁移。数据迁移方面,实施多租户隔离与统一管理规范,确保数据迁移的安全性与合规性。此方案旨在帮助企业平滑迁移上云,优化资源管理,加速业务响应,并保障数据安全与业务连续性,助力数字化转型。
|
6月前
|
移动开发 HTML5
小气泡功能在中的两种实现方案
小气泡功能在中的两种实现方案
55 0
小气泡功能在中的两种实现方案
|
6月前
|
存储 运维 数据库
不敢书面化的解决方案就不是好方案
不敢书面化的解决方案就不是好方案
优化if-else代码的几种方案
优化if-else代码的几种方案
|
数据采集 监控 网络架构
火力发电厂辅控网改造方案及网络架构分析
本文简要的介绍了火力发电厂辅控网改造后的通讯方式,对辅控网网络架构及数据采集方式进行了分析。
火力发电厂辅控网改造方案及网络架构分析
|
数据可视化 数据挖掘 大数据
方案_技术方案|学习笔记
快速学习方案_技术方案
170 0
方案_技术方案|学习笔记
|
SQL 前端开发 JavaScript
6款 Retool 最佳替代方案
本篇文章的目的通过低代码平台使用者的视角引出细节,了解他们为什么使用低代码平台以及会选择哪个低代码平台来加速内部系统的开发。
821 0
6款 Retool 最佳替代方案
|
SQL 缓存 测试技术
预告片优化方案
 看了一下代码,同时在线上做了观察压测。个人总结这个接口问题在于太过于依赖缓存,根本不会走DB。依赖缓存造成了依赖缓存的数据结构。首先要从缓存中取出一堆数据。而且要走两次,一次取正片的信息,一次取专辑内所有视频的信息。取出来的信息在CPU里计算筛选,排序。本身缓存取数据就比较快,再加上计算量大。其实我们并发量最大的api接口们都是采用这个模式设计的。调用的多了,我觉得我真是压测的狠的话,会造成CPU密集。其实现在的缓存之类的都可以持久化了,完全可以当数据库用。但是关系型数据作为一个长久的经典还有一个很重要的原因:保持一个IO和CPU使用的平衡。
预告片优化方案