需求
页面切换的时候,会遇到这样的需求:切换时需要判断内容区域编辑后是否保存了, 若没保存,则弹出提示框,提示保存。
官网示例
react router中的Prompt可以实现这样的功能。
Prompt示例
Prompt文档
/** when:是否启用 */
/** message:string | func */
// 示例1
<Prompt
when={
formIsHalfFilledOut}
message="Are you sure you want to leave?"
/>
// 示例2
<Prompt
message={
(location, action) => {
if (action === 'POP') {
console.log("Backing up...")
}
return location.pathname.startsWith("/app")
? true
: `Are you sure you want to go to ${
location.pathname}?`
}}
/>
实现
我们项目的技术栈umi+antd+react
弹框用的Antd的 Modal.confirm
import React, {
useEffect, useState } from 'react';
import {
Modal } from 'antd';
import