react-router中离开确认组件Prompt

在某些页面中，特别是设计到多个表单项填写的，产品需求要求：在离开页面时，需要提示用户当前页面的数据尚未保存，二次确认后才能离开页面。

大概效果如图：

幸运的是，在react-router 4中自带此类组件Prompt，这是官方示例。

支持的参数也比较简单：

1. when：设置是否启用Prompt功能。比如表单页未填写时，就不需要离开确认。
2. message：string。设置Prompt提示内容
3. message：function。此时返回参数分为true/false，即bool类型。返回false就继续停留在当前页面，返回true则跳转到新页面。

所以结合参数when和message function可以创造无限可能，比如指定提示框等，哈哈哈哈。下面给出两篇文章参考：

<