react下路由切换 询问提示

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

这是实现提示的效果哦~
clipboard.png
首先需要依赖这个这个插件 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 (
      <div>
      /**
        * @param crntLocation 当前路由路径数据
        * @param nextLocation 要切换的路由路径数据
        * pathname 代表路径的值
       * * */
         <NavigationPrompt when={(crntLocation, nextLocation) => {
             if (isWhen && crntLocation.pathname !== nextLocation.pathname) {
            return true;
          }
          return false;
        }
        }
        >
        /**
          * @param onConfirm 确定离开调用当前函数 
          * @param onCancel 不离开时调用当前函数
         * * */
          {({ onConfirm, onCancel }) => {
            confirm({
             title: '检测到您还有数据未保存,确定离开吗?',
              onOk() {
                onConfirm();
              },
              onCancel() {
                onCancel();
              },
            });
          }}
        </NavigationPrompt>
      </div>
    );
  }
}

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

你可能感兴趣的

连老师 作者 · 4月26日

使用过程中,有什么问题 欢迎提问哈~

回复

Myh_s · 6月17日

这个跟react-router 的 Prompt 有什么不同的地方吗 之前也搞过这个头大了好久

回复

0

Prompt 是react-router内置的跳转页面之前给的提示信息,样式不能自定义。 这个控件可以自定义提示显示 以及可控的离开页面的事件

连老师 作者 · 6月18日
载入中...