react-router 4.0 路由切换时Prompt跳转提示

“遇到一些需求，用户在某个页面修改数据，离开时，提示用户：当前页面有数据修改，是否确认离开？” 遇到这样的需求，总结以下解决办法：

利用 react-router 提供的 Prompt 组件：

Prompt组件有俩个属性：

message：用于显示提示的文本信息。
when：传递布尔值，相当于标签的开关，默认是 true，设置成 false 时，失效。

import React, { Component } from 'react'
import { Prompt } from 'react-router-dom';

export default class Form extends Component {
  constructor(props){
    super(props)
    this.state = {
      status:false // 页面是否有数据修改
    }
  }
  render() {
    let { status } = this.state;
    return (
      <div>
        <input
          placeholder="输入内容"
          onChange={event => {
            this.setState({
              status: event.target.value.length > 0
            });
          }}
        />

        <Prompt
          when={status}
          message={location =>
            `检测到当前页面有修改，是否继续前往 ${location.pathname} 页面`
          }
        />
      </div>
    )
  }
}

bug：当用户使用手机物理返回键时，监听可以生效，但是路径依然会发生变化

尝试利用 react-router(BrowserRouter、HashRouter)提供的 getUserConfirmation 解决