当前位置：首页 > news >正文

React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例

news 来源：原创 2025/7/2 1:36:20

React Router 中的 unstable_usePrompt 是一个用于在用户尝试离开当前页面时触发确认提示的自定义钩子，常用于防止用户误操作导致数据丢失（例如未保存的表单）。

一、unstable_usePrompt用途

防止意外离开页面：当用户在当前页面有未保存的变更时，阻止直接离开。

自定义提示消息：允许开发者指定浏览器默认确认对话框中显示的消息。

二、unstable_usePrompt 基本使用

import { unstable_usePrompt } from "react-router-dom";function EditForm() {const [inputValue, setInputValue] = useState("");const [isDirty, setIsDirty] = useState(false);// 启用提示：当 isDirty 为 true 时触发提示unstable_usePrompt({when: isDirty,message: "您有未保存的更改，确定要离开吗？",});const handleInputChange = (e) => {setInputValue(e.target.value);setIsDirty(true); // 标记为有未保存的更改};const handleSubmit = () => {// 提交数据后重置状态setIsDirty(false);};return (<div><input type="text" value={inputValue} onChange={handleInputChange} /><button onClick={handleSubmit}>保存</button></div>);
}

三、unstable_usePrompt 参数说明

参数
when：Boolean类型 控制是否启用提示。当为 true 时，用户尝试离开页面会触发确认对话框。
message： String类型 用户离开时显示的提示消息（部分浏览器可能忽略自定义消息，使用默认文案）。

四、unstable_usePrompt注意事项

4.1、API 稳定性

unstable_usePrompt 是实验性 API，未来 React Router 版本可能重命名或移除。需关注官方更新。

4.2、浏览器兼容性

部分浏览器（如 Chrome）允许自定义提示消息，但某些场景（如页面关闭）可能强制使用默认文案。

移动端浏览器可能限制自定义提示行为。

4.3、条件管理

确保 when 参数在适当的时候设置为 false（如数据提交后），避免错误拦截用户导航。

4.4、路由上下文

组件必须位于 <BrowserRouter> 或路由上下文内部，否则钩子无法正常工作。

五、unstable_usePrompt完整案例

import { unstable_usePrompt, Link } from "react-router-dom";function EditPage() {const [name, setName] = useState("");const [isDirty, setIsDirty] = useState(false);unstable_usePrompt({when: isDirty,message: "确定要放弃未保存的更改吗？",});return (<div><h1>编辑用户信息</h1><inputtype="text"value={name}onChange={(e) => {setName(e.target.value);setIsDirty(true); // 输入后标记为未保存}}/><buttononClick={() => {// 模拟保存操作setIsDirty(false);}}>保存</button><Link to="/">返回首页</Link></div>);
}

六、unstable_usePrompt 替代方案

如果担心 API 不稳定，可用 useBeforeUnload 处理页面关闭事件（但无法拦截应用内路由跳转）：

import { useBeforeUnload } from "react-router-dom";useBeforeUnload(() => {if (isDirty) {return "您有未保存的更改！";}
});

注意：unstable_usePrompt，可以有效提升涉及敏感操作页面的用户体验，但需权衡其潜在风险。

React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例

React Router 中的 unstable_usePrompt 是一个用于在用户尝试离开当前页面时触发确认提示的自定义钩子，常用于防止用户误操作导致数据丢失（例如未保存的表单）。一、unstable_usePrompt用途防止意外离开页面：当用户在当前页面有…...

编程日记 2025/7/2 1:36:20

《P4391 [BalticOI 2009] Radio Transmission 无线传输题解》

题目描述给你一个字符串 s1，它是由某个字符串 s2 不断自我连接形成的（保证至少重复 2 次）。但是字符串 s2 是不确定的，现在只想知道它的最短长度是多少。输入格式第一行一个整数 L，表示给出字符串的长度。…...

编程日记 2025/6/28 22:57:15

使用ECS搭建云上博客wordpress（ALMP）

一、需求分析与技术选型 1. 架构组成及含义本文使用ECS云服务器，采用ALMP架构搭建wordpress。组件具体的含义如下表： 组件作用WordPress中的功能体现Linux操作系统基础，提供稳定运行环境支持PHP运行和服务器管理ApacheWeb服务器&#xff…...

编程日记 2025/7/2 1:34:49

Scratch游戏 | 企鹅大乱斗

有没有过无聊到抓狂的时刻？试试这款企鹅大乱斗吧！超简单的玩法，让你瞬间告别无聊！ 🎮 玩法超简单等待屏幕出现 ”Go!” 疯狂点击，疯狂拍打企鹅！ 💥 游戏特色解压神器&#x…...

编程日记 2025/6/28 22:57:21

深入理解SpringBoot中的SpringCache缓存技术

深入理解SpringBoot中的SpringCache缓存技术引言在现代应用开发中，缓存技术是提升系统性能的重要手段之一。SpringBoot提供了SpringCache作为缓存抽象层，简化了缓存的使用和管理。本文将深入探讨SpringCache的核心技术点及其在实际业务中的应用场景。…...

编程日记 2025/6/28 23:37:37

URP相机如何将场景渲染定帧模糊绘制

1）URP相机如何将场景渲染定帧模糊绘制 2）为什么Virtual Machine会随着游戏时间变大 3）出海项目，打包时需要勾选ARMv7吗 4）Unity是手动还是自动调用GC.Collect 这是第431篇UWA技术知识分享的推送，精选了UWA社…...

编程日记 2025/6/28 22:57:13

嵌入式中深入理解C语言中的指针：类型、区别及应用

在嵌入式开发中，C语言是一种基础且极为重要的编程语言，其中指针作为一个非常强大且灵活的工具，广泛应用于内存管理、动态数据结构的实现以及函数参数的传递等方面。然而，尽管指针的使用极为常见，很多开发者在掌握其基本使用后，往往对指针的深入理解还不够。本文将深入分析…...

编程日记 2025/6/28 23:09:39

.NET程序启动就报错，如何截获初期化时的问题json

一：背景 1. 讲故事前几天训练营里的一位朋友在复习课件的时候，程序一跑就报错，截图如下： 从给出的错误信息看大概是因为json格式无效导致的，在早期的训练营里曾经也有一例这样的报错，最后定位下来是公司…...

编程日记 2025/6/29 1:02:32

WeakAuras Lua Script ICC （BarneyICC）

WeakAuras Lua Script ICC （BarneyICC） https://wago.io/BarneyICC/69 全量英文字符串： !WA:2!S33c4TXX5bQv0kobjnnMowYw2YAnDKmPnjnb4ljzl7sqcscl(YaG6HvCbxaSG7AcU76Dxis6uLlHNBIAtBtRCVM00Rnj8Y1M426ZH9XDxstsRDR)UMVCTt0DTzVhTjNASIDAU…...

编程日记 2025/6/28 22:57:20

Sunsetting 创建 React App

🤖 作者简介：水煮白菜王，一位前端劝退师 👻 👀 文章专栏： 前端专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧和知识归纳总结✍。感谢支持💕💕&#…...

编程日记 2025/6/29 1:27:54

Python笔记：c++内嵌python，c++主窗口如何传递给脚本中的QDialog，使用的是pybind11

1. 问题描述用的是python 3.8.20, qt版本使用的是5.15.2, PySide的版本是5.15.2, pybind11的版本为2.13.6 网上说在python脚本中直接用PySide2自带的QWinWidget，如from PySide2.QtWinExtras import QWinWidget，但我用的版本中说没有QWinWidget&#x…...

编程日记 2025/6/28 22:57:16

环境配置与MySQL简介

目录 1 环境配置 2 MySQL简介 1 环境配置本专栏使用CentOS7进行讲解。首先我们查看系统中是否已经安装了MySQL，可以使用rpm -qa 命令查看系统安装包/压缩包列表这只是看我们是否下载过对应安装包，不一定就安装了。如果我们需要重新下载，…...

编程日记 2025/6/28 22:57:19

Unity3D游戏内存管理优化指南

前言 Unity3D 的内存管理机制较为复杂，开发者需要理解其内存分布以避免内存泄漏和性能问题。以下是 Unity3D 游戏内存分布的核心概览，结合托管堆、本地堆、资源内存等关键模块： 对惹，这里有一个游戏开发交流小组，大家…...

编程日记 2025/6/28 22:57:12

深度解析 Sora：从技术原理到多场景实战的 AI 视频生成指南【附学习资料包下载】

一、技术架构与核心能力解析 1.1 时空建模体系的创新突破 Sora 在视频生成领域的核心优势源于其独特的时空建模架构。区别于传统将视频拆解为单帧处理的模式，Sora 采用时空 Patch 嵌入技术，将连续视频序列分割为 32x32 像素的时空块（每个块包含相邻 3 帧画面），通过线性投…...

编程日记 2025/6/28 22:57:29

Maven构建流程详解：如何正确管理微服务间的依赖关系-当依赖的模块更新后，我应该如何重新构建主项目

文章目录一、前言二、Maven 常用命令一览三、典型场景说明四、正确的构建顺序正确做法是： 五、为什么不能只在 A 里执行 clean install？六、进阶推荐：使用多模块项目（Multi-module Project）七、总结一、前言在现代…...

编程日记 2025/6/29 1:12:03

zookeeper本地部署

下载源码本地运行 zookeeper下载地址更改配置运行命令如果本地启动zookeeper时出现了端口被占用的情况，在 conf 下的 zoo.cfg 文件中加入 admin.serverPort“端口号”...

编程日记 2025/6/28 22:57:40

精益数据分析（59/126）：移情阶段的深度博弈——如何避开客户访谈的认知陷阱

精益数据分析（59/126）：移情阶段的深度博弈——如何避开客户访谈的认知陷阱在创业的移情阶段，客户访谈是挖掘真实需求的核心手段，但人类认知偏差往往导致数据失真。今天，我们结合《精益数据分析》的方法论…...

编程日记 2025/6/29 1:29:21

一文理解扩散模型(生成式AI模型)(2)

第二期内容主要是扩散模型的架构，其中包括用于扩散模型的U-Net架构和用于扩散模型的transformer架构。(transformer架构非常重要) 扩散模型需要训练一个神经网络来学习加噪数据的分数函数，或者学习加在数据上的噪声(这对应上文所展示的扩散模型的两种训…...

编程日记 2025/6/29 0:48:30

【Java面试题】——this 和 super 的区别

🎁个人主页：User_芊芊君子 🎉欢迎大家点赞👍评论📝收藏⭐文章 🔍系列专栏：【Java】内容概括【前言】在Java的世界里，this和 super是两个非常重要且容易混淆的关键字。无论是在日常…...

编程日记 2025/6/28 22:57:46

数据结构基础排序算法

选择排序选择排序的基本思路：从待排序元素中选取最大（或最小）的一个元素加入到已完成排序的末尾。 #include <stdio.h>#define ARR_LEN(arr) (sizeof(arr) / sizeof(arr[0])) #define SWAP(arr, i, j ) { \ int tmp arr[i]; …...

编程日记 2025/6/28 22:57:27

数据结构中的高级排序算法

希尔排序你可以将希尔排序理解成——先通过几次分组的、较小的组间插入排序将原数组变得有序，最后再进行一次序列基本有序的完整插入排序。 #include <stdio.h>#define ARR_LEN(arr) (sizeof(arr) / sizeof(arr[0]))void print_arr(int arr[], int len) {for…...

编程日记 2025/6/29 1:01:28

家庭宽带的内网穿透实践

家庭宽带的内网穿透实践龙生龙，凤生凤，老鼠的儿子会打洞。我们今天来学习 “打洞” ！ 背景众所周知，当前运营商在IPv4环境下面，由于地址资源不够，启用了大内网策略。导致家庭宽带到路由器这一层都分配了…...

编程日记 2025/6/28 22:57:42

LabVIEW在电子电工教学中的应用

在电子电工教学领域，传统教学模式面临诸多挑战，如实验设备数量有限、实验过程存在安全隐患、教学内容更新滞后等。LabVIEW 作为一款功能强大的图形化编程软件，为解决这些问题提供了创新思路，在电子电工教学的多个关键环节发挥着重…...

编程日记 2025/6/28 23:33:37

算法每日刷题 Day6 5.14:leetcode数组1道题，用时30min,明天按灵茶山艾府题单开刷，感觉数组不应该单算

14. 977.有序数组的平方(简单，学习，双指针) 977. 有序数组的平方 - 力扣（LeetCode） 思想法一: 1.平方赋值到另一个数组sort排序法二: 1.寻找负数和非负数的分界线(学习代码如何写？)，[0,neg]负数,[neg1…...

编程日记 2025/6/28 22:57:34

JS逆向实战四：某查查请求头逆向解密

声明：本文章中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！…...

编程日记 2025/6/29 0:12:06

QT之QComboBox组件

欢迎来到破晓的历程的博客 ⛺️不负时光，不负己✈️ 文章目录 1.引言2.初见QComboBox3.核心功能和常用方法1. 添加和删除选项2. 获取和设置当前值3. 可编辑模式4. 数据绑定 4.信号与槽5.应用场景6.使用示例7.总结 1.引言在记事本项目中，不同的编码设…...

编程日记 2025/6/28 22:57:35

数值积分知识

数值积分对于增加插值节点序列： { x i } i 0 n \left\{x_i\right\}_{i0}^{n} {xi}i0n，由插值定理给出： f ( x ) ∑ i 0 n y i l i ( x ) f ( n 1 ) ( ξ ) ( n 1 ) ! ∏ i 0 n ( x − x i ) f(x)\sum_{i0}^{n}y_i l_i(x)\frac{f…...

编程日记 2025/6/28 23:01:23

代码随想录训练营第二十三天| 572.另一颗树的子树 104.二叉树的最大深度 559.N叉树的最大深度 111.二叉树的最小深度

572.另一颗树的子树： 状态：已做出思路： 这道题目当时第一时间不是想到利用100.相同的树思路来解决，而是先想到了使用kmp，不过这个题目官方题解确实是有kmp解法的，我使用的暴力解法，kmp的大致思…...

编程日记 2025/6/29 0:02:46

力扣-105.从前序与中序遍历序列构造二叉树

题目描述给定两个整数数组 preorder 和 inorder ，其中 preorder 是二叉树的先序遍历， inorder 是同一棵树的中序遍历，请构造二叉树并返回其根节点。 class Solution { public:TreeNode* buildTree(vector<int>& preorder, vecto…...

编程日记 2025/6/28 22:57:33

【Linux网络】————详解TCP三次握手四次挥手

作者主页： 作者主页本篇博客专栏：Linux 创作时间 ：2025年5月14日一、TCP三次握手四次挥手介绍 TCP使用三次握手来进行建立连接，四次挥手来终止连接，为何连接还要这么麻烦呢，那是因为这样可以确保建立…...

编程日记 2025/6/28 22:57:47

LLM（大语言模型）部署加速方法——PagedAttention

一、vLLM 用于大模型并行推理加速存在什么问题？ vLLM 用于大模型并行推理加速，其中核心改进是PagedAttention算法，在 vLLM 中，我们发现 LLM 服务的性能受到内存的瓶颈。在自回归解码过程中，LLM 的所有输入标记都会生…...

编程日记 2025/6/28 22:57:25

附加：TCP如何保障数据传输

附加：TCP如何保障数据传输 LS-NET-012-TCP的交互过程详解 TCP 如何保障数据传输 TCP（Transmission Control Protocol，传输控制协议）是互联网核心协议之一，负责在IP网络上提供可靠的、面向连接的数据传输服务。它位于T…...

编程日记 2025/6/29 1:22:54

【python机器学习】Day 25 异常处理

知识点： 异常处理机制debug过程中的各类报错try-except机制try-except-else-finally机制在即将进入深度学习专题学习前，我们最后差缺补漏，把一些常见且重要的知识点给他们补上，加深对代码和流程的理解。借助ai写代码的时候&…...

编程日记 2025/6/29 0:23:36

idea springboot 配置文件中文显示

这里一定要注意编码。如果使用的是中文，则有可能出现乱码， 请单击IDEA菜单栏中的“File→→Settings→Editor→File Encodings”命令， 然后将 Properties Files(*.properties)下的“Default encoding for properties files"设置为UTF-8,…...

编程日记 2025/6/28 22:57:48

day20-线性表（链表II）

一、调试器 1.1 gdb（调试器） 在程序指定位置停顿 1.1.1 一般调试 gcc直接编译生成的是发布版（Release） gcc -g //-g调式版本，（体积大，内部有源码）（DeBug&#…...

编程日记 2025/6/29 1:20:03

深入剖析某App视频详情逆向：聚焦sig3参数攻克

深入剖析某手App视频详情逆向：聚焦sig3参数攻克一、引言在当今互联网信息爆炸的时代，短视频平台如某手，已成为人们获取信息、娱乐消遣的重要渠道。对于技术爱好者和研究人员而言，深入探索其内部机制，特别是视频详情…...

编程日记 2025/6/28 22:57:43

数据结构与算法-双向链表专题

目录一. 双向链表的结构二.双向链表的使用 2.1 创建节点 2.2 初始化 2.3 打印 2.4 尾插 2.5 头插 2.6 尾删 2.7 头删 2.8 在指定位置pos之后插入数据 2.9 查找数据 2.10 删除pos位置的节点 2.11 销毁链表一. 双向链表的结构在List.h的头文件中对链表的结构进行创建 #prag…...

编程日记 2025/6/29 0:57:58

为什么要选择七彩喜数字康养平台？加盟后有何优势？

一．七彩喜数字康养平台 1.技术领先性七彩喜依托“端-网-云-脑”四层技术架构，整合毫米波雷达、AI算法引擎、区块链等前沿技术，解决传统养老的隐私泄露、设备孤岛等痛点。比如非接触式健康监测系统通过毫米波雷达实现跌倒检测准确率&#…...

编程日记 2025/7/1 15:09:25

vscode调试c/c++

1. 调试配置选择调试 C 程序：选择 "Debug C Program"（调用 gcc 编译）。调试 C 程序：选择 "Debug C Program"（调用 g 编译）。 2. 调试步骤打开代码文件：确保当前编辑器…...

编程日记 2025/6/28 23:57:12

进阶数据结构： AVL树

嘿，各位技术潮人！好久不见甚是想念。生活就像一场奇妙冒险，而编程就是那把超酷的万能钥匙。此刻，阳光洒在键盘上，灵感在指尖跳跃，让我们抛开一切束缚，给平淡日子加点料，注入满满的pa…...

编程日记 2025/6/29 0:55:16

C# 调试技巧——日志记录，NuGet内断点

在C#中，Debug.WriteLine()、Trace.WriteLine() 和 Console.WriteLine() 都用于输出信息，但它们的用途和适用场景有显著区别。以下是它们的核心差异总结： Debug.WriteLine()主要适用于控制台程序，输出到控制台Trace.WriteLine() …...

编程日记 2025/6/28 23:55:12

模糊数学方法之模糊贴近度

模糊数学方法之模糊贴近度一、概述二、代码实现（内含注释） #程序文件ex14_3.py # 本段带代码主要是用于判断b是属于a中的哪个种类的 # 通过计算贴近度的形式来实现的 import numpy as np a np.array([[0.4,0.3,0.5,0.3],[0.3,0.3,0.4,0.4],[0.2,0.3…...

编程日记 2025/6/29 0:20:40

Spring AI 集成 Mistral AI：构建高效多语言对话助手的实战指南

Spring AI 集成 Mistral AI：构建高效多语言对话助手的实战指南前言在人工智能应用开发领域，选择合适的大语言模型（LLM）与开发框架至关重要。Mistral AI 凭借其高效的多语言模型（如 Mistral-7B、Mixtral-8x7B 等&am…...

编程日记 2025/6/29 0:17:43

季报中的FPGA行业：U型反转，春江水暖

上周Lattice，AMD两大厂商相继发布2025 Q1季报，尽管恢复速度各异，但同时传递出FPGA行业整体回暖的复苏信号。 5月5日，Lattice交出了“勉强及格”的答卷，报告季度营收1亿2000万，与华尔街的预期基本相符。对于这家聚焦在中小规模器件的领先厂商而言，按照其CEO的预期，长…...

编程日记 2025/6/29 0:35:31

Data Mining|缺省值补全实验

实验内容任务描述利用sklearn完成缺省值补全，完成4种以上缺失值补全，并完整地进行模型训练与测试。四种缺失值补全方法：众数插补、均值插补、K-邻近填充、迭代插补(极大似然估计) 采用模型：随机森林RandomForestClassifier( …...

编程日记 2025/6/29 1:00:08

RabbitMQ 快速上手：安装配置与 HelloWorld 实践（一）

一、引言在当今分布式系统大行其道的技术浪潮下，各个服务之间的通信与协同变得愈发复杂。想象一下，一个电商系统在大促期间，订单服务、库存服务、支付服务、物流服务等众多模块需要紧密配合。如果没有一种高效的通信机制，系统很容…...

编程日记 2025/6/28 23:40:24

适配华为昇腾 NPU 的交互式监控工具

适配华为昇腾 NPU 的交互式监控工具在人工智能开发的过程中，我们常常希望能够实时了解计算设备的使用情况。对于使用华为昇腾 NPU 的团队来说，传统上只能通过命令行工具（如 npu-smi）来查询性能指标。但这些命令输出的信息分散且…...

编程日记 2025/6/29 0:59:10

HarmonyOS NEXT～React Native在鸿蒙系统(HarmonyOS)上的适配现状与技术展望

HarmonyOS NEXT～React Native在鸿蒙系统(HarmonyOS)上的适配现状与技术展望一、背景与现状鸿蒙系统(HarmonyOS)作为华为自主研发的分布式操作系统，自2019年发布以来已经迭代多个版本。最新的HarmonyOS NEXT更是明确将仅支持原生应用[5]，这…...

编程日记 2025/7/1 15:38:57