首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react-router 4中离开确认自定义

在有些应用中,产品需求是这样的:例如-用户详情编辑页 当用户跳转路由时,需要提示用户当前页面的数据尚未保存,提示用户离开确认。

大概效果如图:

之前router-router的做法是:

而在react-router 4中 是:

使用Prompt 组件:

其中message可以为:

message: string当用户离开当前页面时,设置的提示信息。

message: func当用户离开当前页面时,设置的回掉函数

when: bool通过设置一定条件要决定是否启用 Prompt,属性值为true时启用防止转换;

但是,直接这样用的话,页面默认弹出的是这样的效果:

不符合我们的产品设计需求。

1. 自定义

直接上demo

更多 react-router的api介绍可以看文章

react-router4相关属性api介绍

极客教程

分享编程知识

关注,每天推送好内容!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180301G1HINH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券