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

因为太激动了,所以写下这边博文以作纪念,哈哈
相关文章
|
21天前
|
人工智能 JSON API
全网刷屏的 Jev 模型正式开放!一手实战测评 + 保姆级教程
全网爆火的 Jev 模型是什么?有什么用?怎么使用?怎么接入 AI 编程工具?效果真的好么?傻子可懂的 Jev 保姆级实战教程 + 项目实战测评来啦
9072 29
|
20天前
|
人工智能 并行计算 PyTorch
秋叶 ComfyUI 2026 整合包 v3.2 完整部署教程:Python 3.13 + Torch 2.13 全栈升级
秋叶aaaki ComfyUI 2026年8月整合包v3.2正式发布!全面升级Python 3.13.11、PyTorch 2.13.0+cu130及ComfyUI v0.30.2,原生支持MiniMax H3、Wan 2.2、Qwen-Image-2.1等2026主流音视频/图像模型,解压即用,无需环境配置。
4198 16
|
19天前
|
人工智能 测试技术 API
最近全网爆火的 Jev 到底是什么?适合干什么、怎么用,一篇讲透!
Jev是TypeSafe AI推出的“系统一模型”,不生成文本,专做毫秒级结构化决策:Choice(多选)、Score(打分)、Noul(是非概率)。响应快193倍、成本低444倍,适合工单路由、内容审核、测试定级等高频判断场景。
2339 4
最近全网爆火的 Jev 到底是什么?适合干什么、怎么用,一篇讲透!
|
7天前
|
存储 人工智能 并行计算
大模型本地部署终端选型方法论:以 Qwen3.8-27B 为例的四档分层完整流程
本文提出一套大模型本地部署终端选型方法论:定约束、定档位、定框架、定参数四步决策法,配合入门、主力、质量、无损四档分层模型。以 Qwen3.8-27B 实测数据为例,逐环节解读显存、带宽、存储、散热、系统、预算等要素,给出面向不同预算的优选方案、决策自查清单与市场观察框架。文末前瞻 AI 笔记本的 CPU+GPU 与统一内存两条路线,论证四步决策法在新品类上的延续性。
|
6天前
|
人工智能 JSON 自然语言处理
2026 年 Jev 决策模型深度拆解:原理解读、实战测评与保姆级落地教程
有一款特殊AI模型在开发者圈子刷屏,它摒弃传统大模型擅长的对话聊天能力,专注做高速结构化决策,它就是TypeSafe AI推出的Jev模型。该模型由ChatGPT共同发明人Diogo Almeida主导研发,定位为**System One Model(系统一模型)**,对标人类大脑快速直觉判断的思维模式,在响应延迟、调用成本、结构化输出稳定性上相比传统生成式大模型有着巨大差异。本文会完整拆解Jev底层原理、三大核心原语能力、适用业务场景,同时提供可直接运行的curl、Python代码示例,并且结合多组实测数据,客观分析模型优势与能力边界,帮助普通开发者和AI应用从业者快速上手落地。
496 1
|
14天前
|
人工智能 Linux 开发者
【2026国内使用】Codex安装过程一篇讲透(Win/Mac/Linux全支持)
Codex是OpenAI推出的AI编程智能体,可读取本地项目、理解需求并自动修改代码。支持桌面GUI、命令行(CLI)及VS Code/Cursor插件三种形态,覆盖可视化操作、终端高效开发与编辑器无缝集成场景,助开发者用自然语言驱动编码全流程。(239字)
1102 2
【2026国内使用】Codex安装过程一篇讲透(Win/Mac/Linux全支持)
|
8天前
|
人工智能 Linux Windows
千问办公(QwenWork)官网入口:其实有2个,一个是网页端千问办公,一个是介绍指南页面
千问办公(QwenWork)是阿里云推出的AI智能办公平台,支持网页端直接使用及Windows/Mac/Linux客户端下载。提供PPT生成、财报分析、网页搭建等AI功能,个人版免费,企业版198元/席/月。详情见官网qwenwork.cn或阿里云产品页。
1058 0
千问办公(QwenWork)官网入口:其实有2个,一个是网页端千问办公,一个是介绍指南页面