脚本宝典收集整理的这篇文章主要介绍了react下路由切换 询问提示,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
- 在业务场景中,某些页面(页面生成的数据离开页面未保存)时需要提示操作者是否确认离开当前页面,如果用系统的提示的信息难免有点太丑,显得和页面样式格格不入。*
下面是我用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 (
<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>
);
}
}
好了~ 这个效果就实现了。
以上是脚本宝典为你收集整理的react下路由切换 询问提示全部内容,希望文章能够帮你解决react下路由切换 询问提示所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。