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

因为太激动了,所以写下这边博文以作纪念,哈哈
相关文章
|
2月前
|
SQL 存储 缓存
后端架构优化方案探讨
【2月更文挑战第6天】在当今互联网时代,后端的稳定性和高效性至关重要。本文从数据库设计、服务器负载均衡、缓存策略等方面,探讨了后端架构优化的方案,旨在提供一些实用性的建议。
|
2月前
|
存储 运维 数据库
不敢书面化的解决方案就不是好方案
不敢书面化的解决方案就不是好方案
|
数据采集 监控 网络架构
火力发电厂辅控网改造方案及网络架构分析
本文简要的介绍了火力发电厂辅控网改造后的通讯方式,对辅控网网络架构及数据采集方式进行了分析。
火力发电厂辅控网改造方案及网络架构分析
|
数据可视化 数据挖掘 大数据
方案_技术方案|学习笔记
快速学习方案_技术方案
130 0
方案_技术方案|学习笔记
|
负载均衡 测试技术 微服务
分布式中灰度方案实践
将版本的分支号加载到服务的元数据信息中,再结合服务名称或者IP地址,来实现对服务列表的多维度过滤,可以支撑大部分轻量级灰度策略的实现。
394 0
分布式中灰度方案实践
|
SQL 前端开发 JavaScript
6款 Retool 最佳替代方案
本篇文章的目的通过低代码平台使用者的视角引出细节,了解他们为什么使用低代码平台以及会选择哪个低代码平台来加速内部系统的开发。
700 0
6款 Retool 最佳替代方案
|
SQL 缓存 测试技术
预告片优化方案
 看了一下代码,同时在线上做了观察压测。个人总结这个接口问题在于太过于依赖缓存,根本不会走DB。依赖缓存造成了依赖缓存的数据结构。首先要从缓存中取出一堆数据。而且要走两次,一次取正片的信息,一次取专辑内所有视频的信息。取出来的信息在CPU里计算筛选,排序。本身缓存取数据就比较快,再加上计算量大。其实我们并发量最大的api接口们都是采用这个模式设计的。调用的多了,我觉得我真是压测的狠的话,会造成CPU密集。其实现在的缓存之类的都可以持久化了,完全可以当数据库用。但是关系型数据作为一个长久的经典还有一个很重要的原因:保持一个IO和CPU使用的平衡。
预告片优化方案
|
运维 监控 安全
架构-稳定性建设逻辑问题实战总结
稳定性问题分为逻辑问题和架构问题。 逻辑问题三板斧:理念正确、流程规范、刨根问底。
架构-稳定性建设逻辑问题实战总结
如何设计可靠的灰度方案
一个较大的业务或系统改动,往往会影响整个产品的用户体验或操作流程。为了控制影响面,可以选取一批特定用户、流程、单据等,只允许这一部分用户或数据按照变更后的新逻辑在系统中流转,而另一部分用户仍然执行变更前的老逻辑。这一步是线上系统灰度方案的起点。
如何设计可靠的灰度方案
|
安全 Java Linux
内网映射方案(lanproxy)
现状 现在运营商提供的宽带服务,无论是动态IP,还是固定IP,默认都是禁止所有端口服务的(目前了解上海是这样的),在路由器上配置的端口映射和DMZ都失效。
4097 0

热门文章

最新文章