Prompt示例:https://reactrouter.com/web/example/preventing-transitions Prompt文檔:https://reactrouter.com/core/api/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}?`   }} />

import React, { useEffect, useState } from 'react'; import { Modal } from 'antd'; import { useBoolean } from '@umijs/hooks'; // umi里封裝了該組件 // 或者 import { Prompt } from "react-router-dom"; import { useParams, history, Prompt } from 'umi'; import {   ExclamationCircleOutlined } from '@ant-design/icons'; import {  isEqual } from '@/utils/utils'; import { FormInstance } from 'antd/lib/form'; export default function BaseInfo() {   const { id } = useParams<{ id: string }>();    // 保留原始數(shù)據(jù)   const [orginData, setOrigin] = useState({});   // 修改后的數(shù)據(jù)   const [modifyData, setModify] = useState({});   // 是否啟用Prompt   const { state, setTrue, setFalse } = useBoolean(false);   // 還原信息 useLoading是自己封裝的hooks   const [isFetching, fetchInfo] = useLoading(getServiceGroupDetail);   useEffect(() => {     (async () => {       try {         if (id !== '0') {           const info = await fetchInfo(id);           setOrigin({             ...info            });           setModify({             ...info            });                   }       } catch (e) {         console.error(e);       }     })();   }, [id]);   useEffect(() => {     if (isEqual(orginData, modifyData)) {       setFalse();     } else {       setTrue();     }   }, [orginData, modifyData]);   const nextStep = (pathname?: string) => {     setFalse();     pathname &&       setTimeout(() => {         history.push(pathname);       });   };   return (       {/* 這里原來(lái)放的Form表單內(nèi)容 */}       {routerWillLeave(state, form, nextStep)}   ); } function routerWillLeave(   isPrompt: boolean | undefined,   formInstance: FormInstance, // 保存，我這個(gè)頁(yè)面是Form表單   nextStep: (pathname?: string) => void ) {   return (     <div>       <Prompt         when={isPrompt}         message={(location) => {           if (!isPrompt) {             return true;           }           Modal.confirm({             icon: <ExclamationCircleOutlined />,             content: '暫未保存您所做的更改，是否保存？',             okText: '保存',             cancelText: '不保存',             onOk() {               formInstance?.submit();               nextStep(location.pathname);             },             onCancel() {               nextStep(location.pathname);             }           });           return false;         }}       />     </div>   ); }