站長(zhǎng)資訊網(wǎng)
react實(shí)現(xiàn)路由跳轉(zhuǎn)前確認(rèn)功能的方法：1、通過(guò)“import { Modal } from 'antd';”方法引入“antd”；2、使用Antd的“Modal.confirm”實(shí)現(xiàn)彈框；3、設(shè)置Form表單內(nèi)容即可。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
react怎么實(shí)現(xiàn)路由跳轉(zhuǎn)前確認(rèn)？
react-router 跳轉(zhuǎn)前確認(rèn)Prompt使用
需求
頁(yè)面切換的時(shí)候，會(huì)遇到這樣的需求：切換時(shí)需要判斷內(nèi)容區(qū)域編輯后是否保存了， 若沒(méi)保存，則彈出提示框，提示保存。
官網(wǎng)示例
react router中的Prompt可以實(shí)現(xiàn)這樣的功能。
Prompt示例:https://reactrouter.com/web/example/preventing-transitions Prompt文檔:https://reactrouter.com/core/api/Prompt
登錄后復(fù)制
/** 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}?` }} />
登錄后復(fù)制
實(shí)現(xiàn)
我們項(xiàng)目的技術(shù)棧umi+antd+react
彈框用的Antd的 Modal.confirm
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> ); }
登錄后復(fù)制
推薦學(xué)習(xí)：《react視頻教程》
