react Prompt组件获取要跳转的路由并拦截并提示用户保存修改数据

import { Prompt } from 'react-router-dom';

Prompt组件可以阻止用户跳转地址，一般用来提示用户是否保存修改过有没有手动保存的数据，在使用 html2canvas 进行截图时出现了很大的坑，需求是要是有些用户可能修改过网页数据，但是忘了或者不点击保存按钮，这是我们需要用Prompt组件进行提醒是否截图当前页面进行保存。

当Prompt的提示框出现后，html2canvas截图代码便会停止，直到点击了提示框的确定或者否才会往下执行，但是如果点击了确定就已经跳转页面了，到时便找不到div来截图了。

解决办法就是Prompt起到拦截任何跳转的作用但是不会出现提示框，同时这个组件还可以为我们传入的函数提供一个location参数，这个参数包含了即将跳转的地址，我们可以将这个地址记录下来，等我们的所有操作执行完了之后在进行跳转。

export default class Page1 extends Component {


  // 向用户确认
  confirmToSave(location){
    document.getElementById('test').innerHTML = location.pathname;
    return false;
  }

  render() {
    return (
      <div>
          <Prompt message={this.confirmToSave.bind(this)}/>
          <h1>我是Page1</h1>
          <Link to="/page2">去page2那</Link>
          <h1 id="test"></h1>
      </div>
    );
  }
}

Prompt组件有两个属性mssage和when，message可以接受一个String或者一个函数，String类型将作为提示框的提示语，函数如果返回字符串也是提示语，返回true直接跳转，返回false不跳转，when接受true和false，默认为true，渲染此组件，false为不渲染，就是没效果。