react下路由切换询问提示

NeverSayNever 发布于2019-08-23 17:09 / 2271人阅读

摘要：在业务场景中，某些页面页面生成的数据离开页面未保存时需要提示操作者是否确认离开当前页面，如果用系统的提示的信息难免有点太丑，显得和页面样式格格不入。

在业务场景中，某些页面（页面生成的数据离开页面未保存）时需要提示操作者是否确认离开当前页面，如果用系统的提示的信息难免有点太丑，显得和页面样式格格不入。*
下面是我用react版本结合antd的实现需要的同学可以参考下哈

这是实现提示的效果哦~

首先需要依赖这个这个插件 react-router-navigation-prompt
下面是具体的代码

import React from "react";
import {
  Modal,
} from "antd";
import NavigationPrompt from "react-router-navigation-prompt";

const confirm = Modal.confirm;

class RouterAlert extends React.Component {
// 设置当前路由切换时是否切换 可根据具体业务操作
  state = {
    isWhen: false,
  };


  render() {
    const { isWhen } = this.state;
    return (
      
      /**
        * @param crntLocation 当前路由路径数据
        * @param nextLocation 要切换的路由路径数据
        * pathname 代表路径的值
       * * */
          {
             if (isWhen && crntLocation.pathname !== nextLocation.pathname) {
            return true;
          }
          return false;
        }
        }
        >
        /**
          * @param onConfirm 确定离开调用当前函数 
          * @param onCancel 不离开时调用当前函数
         * * */
          {({ onConfirm, onCancel }) => {
            confirm({
             title: "检测到您还有数据未保存，确定离开吗？",
              onOk() {
                onConfirm();
              },
              onCancel() {
                onCancel();
              },
            });
          }}
        
      
    );
  }
}

好了~ 这个效果就实现了。

GPU云服务器云服务器服务器配置路由下一跳技术询问 python在线询问 linux 关闭询问

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103896.html

react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

itvincent 2019-08-26 13:51 评论0 收藏0
react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

Joyven 2019-08-02 15:06 评论0 收藏0
React Router 使用教程(阮一峰)

摘要：它是官方维护的，事实上也是唯一可选的路由库。表示的这个部分是可选的。另一种做法是，使用指定当前路由的。而组件会使用路径的精确匹配。否则用户直接向服务器请求某个子路由，会显示网页找不到的错误。真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做...

Yang_River 2019-08-20 17:03 评论0 收藏0
react离开页面，自定义弹框拦截，路由拦截

摘要：前言项目有个需求是跳转路由，在离开页面前，需要弹框询问用户是否确定离开。 showImg(https://segmentfault.com/img/remote/1460000019105899); 前言：项目有个需求是：跳转路由，在离开页面前，需要弹框询问用户是否确定离开。用react-router的组件是可以的，但是，怎么使用antd组件（或者说自定义组件）呢？请看下面先看的这个...

X1nFLY 2019-08-23 17:20 评论0 收藏0