React method to implement the confirmation function before routing jump: 1. Introduce "antd" through the "import { Modal } from 'antd';" method; 2. Use Antd's "Modal.confirm" to implement the pop-up box ; 3. Set the form content.
The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.
How to confirm before routing jump in react?
react-router Confirm Prompt before jumping using
Requirements
When switching pages, you will encounter such requirements: Switch It is necessary to determine whether the content area has been saved after editing. If not, a prompt box will pop up to prompt for saving.
Official website example
Prompt in react router can achieve such a function.
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}?` }} />
Implementation
The technology stack of our project umi antd react
Modal.confirm of Antd used in the pop-up box
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 }>(); // 保留原始数据 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') { 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 ( {/* 这里原来放的Form表单内容 */} {routerWillLeave(state, form, nextStep)} ); } function routerWillLeave( isPrompt: boolean | undefined, formInstance: FormInstance, // 保存,我这个页面是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> ); }
Recommended learning: "react video tutorial"
The above is the detailed content of How to implement confirmation before routing jump in react. For more information, please follow other related articles on the PHP Chinese website!