文章页正文上
这篇文章主要介绍“react如何实现路由跳转前确认”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何实现路由跳转前确认”文章能帮助大家解决问题。 react实现路由跳转前确认功能的方法:1、通过“import { Modal } from ‘antd’;”方法引入“antd”;2、使用Antd的“Modal.confirm”实现弹框;3、设置Form表单内容即可。react-router 跳转前确认Prompt使用需求页面切换的时候,会遇到这样的需求:切换时需要判断内容区域编辑后是否保存了, 若没保存,则弹出提示框,提示保存。官网示例react router中的Prompt可以实现这样的功能。
/**when:是否启用*/ /**message:string|func*/ //示例1//示例2 { 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(); //保留原始数据 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; }} />
关于“react如何实现路由跳转前确认”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。
本篇内容介绍了“Vue的全局错误有哪些及怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 免费云主机、域名 什么是Vue全局错误当Vue应用程序出现错误时…
文章页内容下