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

这篇文章主要介绍“React如何实现路由跳转前确认”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现路由跳转前确认”文章能帮助大家解决问题。

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

react-router 跳转前确认Prompt使用

需求

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

官网示例

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

// 示例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}?`  }}/>

实现

我们项目的技术栈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 }>();   // 保留原始数据  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 (      {}      {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>  );}

关于“react如何实现路由跳转前确认”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。