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可以创造无限可能，比如指定提示框等，哈哈哈哈。下面给出两篇文章参考：

1. react-router 4中离开确认自定义
2. react-router4相关属性api介绍

我在实际项目中，也是用到自定义弹窗的ant-design-mobile的Modal对话框，但是Modal的按钮点击函数是箭头函数，和正常情况下window.confirm同步返回不一样。所以这里需要利用Prompt的参数when和message function、React的render，代码如下：

render() {
    const { isPrompt } = this.state;
    return (
      <div className={styles.contain}>
        <Prompt
          when={isPrompt}
          message={(location) => {
            if (!isPrompt) {
              return true;
            }
            Modal.alert('提示', '是否确认退出补充实名资料?', [
              { text: '取消' },
              {
                text: '确认', 
                onPress: () => this.setState({ 
                  	isPrompt: false,
                  },
                  () => this.props.dispatch(routerRedux.goBack())
                ),
              },
            ]);
            return false;
          }
          }
        />
      </div>
    )
}

代码逻辑应该比较好懂，下面列出关键点：

1. isPrompt：控制是否启用 Prompt。
2. message function：默认都返回false，表示继续停留在当前页面。
3. setState：根据Modal的点击，去改变isPrompt的值，然后再手动执行回退操作，这时Prompt未启动，就能正常离开页面。

上述步骤就顺利将异步转为同步，应该能实现很多变态的需求。