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介绍

极客教程

分享编程知识

关注，每天推送好内容!