react怎么实现路由跳转前确认

藏色散人
发布: 2023-01-19 11:18:09
原创
1767人浏览过
react实现路由跳转前确认功能的方法:1、通过“import { Modal } from 'antd';”方法引入“antd”;2、使用Antd的“Modal.confirm”实现弹框;3、设置Form表单内容即可。

react怎么实现路由跳转前确认

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现路由跳转前确认?

react-router 跳转前确认Prompt使用

需求

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

76e3f238f1706dafbeef6b076cc6f23.jpg

官网示例

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

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}?`
  }}
/>
登录后复制

实现

我们项目的技术栈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>
  );
}
登录后复制

推荐学习:《react视频教程

以上就是react怎么实现路由跳转前确认的详细内容,更多请关注php中文网其它相关文章!

路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号