react如何实现路由跳转前确认(react,web开发)

react实现路由跳转前确认功能的方法：1、通过“import { Modal } from 'antd';”方法引入“antd”；2、使用Antd的“Modal.confirm”实现弹框；3、设置Form表单内容即可。

react-router 跳转前确认Prompt使用

需求

页面切换的时候，会遇到这样的需求：切换时需要判断内容区域编辑后是否保存了， 若没保存，则弹出提示框，提示保存。

官网示例

react router中的Prompt可以实现这样的功能。

/**when:是否启用*//**message:string|func*///示例1<Promptwhen={formIsHalfFilledOut}message="Areyousureyouwanttoleave?"/>//示例2<Promptmessage={(location,action)=>{if(action==='POP'){console.log("Backingup...")}returnlocation.pathname.startsWith("/app")?true:`Areyousureyouwanttogoto${location.pathname}?`}}/>

实现

我们项目的技术栈umi+antd+react

弹框用的Antd的 Modal.confirm

importReact,{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';exportdefaultfunctionBaseInfo(){const{id}=useParams<{id:string}>();//保留原始数据const[orginData,setOrigin]=useState({});//修改后的数据const[modifyData,setModify]=useState({});//是否启用Promptconst{state,setTrue,setFalse}=useBoolean(false);//还原信息useLoading是自己封装的hooksconst[isFetching,fetchInfo]=useLoading(getServiceGroupDetail);useEffect(()=>{(async()=>{try{if(id!=='0'){constinfo=awaitfetchInfo(id);setOrigin({...info});setModify({...info});}}catch(e){console.error(e);}})();},[id]);useEffect(()=>{if(isEqual(orginData,modifyData)){setFalse();}else{setTrue();}},[orginData,modifyData]);constnextStep=(pathname?:string)=>{setFalse();pathname&&setTimeout(()=>{history.push(pathname);});};return({/*这里原来放的Form表单内容*/}{routerWillLeave(state,form,nextStep)});}functionrouterWillLeave(isPrompt:boolean|undefined,formInstance:FormInstance,//保存，我这个页面是Form表单nextStep:(pathname?:string)=>void){return(<div><Promptwhen={isPrompt}message={(location)=>{if(!isPrompt){returntrue;}Modal.confirm({icon:<ExclamationCircleOutlined/>,content:'暂未保存您所做的更改，是否保存？',okText:'保存',cancelText:'不保存',onOk(){formInstance?.submit();nextStep(location.pathname);},onCancel(){nextStep(location.pathname);}});returnfalse;}}/></div>);}