react如何实现路由跳转前确认

/**when:是否启用*/
/**message:string|func*/
//示例1

//示例2
{
if(action==='POP'){
console.log("Backingup...")
}
returnlocation.pathname.startsWith("/app")
?true
:`Areyousureyouwanttogoto${location.pathname}?`
}}
/>

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();
//保留原始数据
const[orginData,setOrigin]=useState({});
//修改后的数据
const[modifyData,setModify]=useState({});
//是否启用Prompt
const{state,setTrue,setFalse}=useBoolean(false);
//还原信息useLoading是自己封装的hooks
const[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(

{
if(!isPrompt){
returntrue;
}
Modal.confirm({
icon:,
content:'暂未保存您所做的更改，是否保存？',
okText:'保存',
cancelText:'不保存',
onOk(){
formInstance?.submit();
nextStep(location.pathname);
},
onCancel(){
nextStep(location.pathname);
}
});
returnfalse;
}}
/>


);
}