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为不渲染,就是没效果。