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

发布时间：2023-07-17 10:42:05 所属栏目：教程来源：未知

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

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

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

　　react-router 跳转前确认Prompt使用

　　需求

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

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

　　官网示例

　　react router中的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}?`

　　 }}

　　/>

　　实现

　　我们项目的技术栈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 (

　　      {/* 这里原来放的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>

　　 );

　　}

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!