react离开页面，自定义弹框拦截，路由拦截
react离开页面，自定义弹框拦截，路由拦截
前言：
项目有个需求是：跳转路由，在离开页面前，需要弹框询问用户是否确定离开。
用react-router的<Prompt>组件是可以的，但是，怎么使用antd组件（或者说自定义组件）呢？
请看下面
先看的这个：https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router
（1）使用react-router的<Prompt>
import { Prompt } from 'react-router'
<Prompt
message="你确定要离开嘛?"
/>
（2）<Prompt>支持函数
<Prompt
when={true}
message={(location) => {
return window.confirm(`confirm to leave to ${location.pathname}?`);
}}
/>
（3）history.block，这个是个坑！
import { history } from 'path/to/history';
class MyComponent extends React.Component {
componentDidMount() {
history.block(targetLocation => {
// take your action here
return false;
});
}
render() {
//component render here
}
}
坑的原因是history.block()方法是不能和<Modal>组件并列使用的，而必须在history.block()内部去调用<Modal>组件（就是注释take your action here那里），这就导致一个问题：<Modal>组件里的 onOk、onCancel 如何返回值给 history.block()的 return 语句（return false/true）的同时，不让history.block()的 return 语句和 <Modal>组件顺序执行呢？
说白点就是，<Modal>组件先显示出来，阻塞后面的 return false/true，等 <Modal>组件的 onOk、onCancel 方法执行后，再 return false/true
我试了几种方法，不行，直到找到这篇文章： Using React-Router v4 Prompt with custom modal component（https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39）
（4）在离开页面，路由跳转时，自定义弹框拦截，并询问
handlePrompt = location => {
if (!this.isSave) {
this.showModalSave(location);
return false;
}
return true;
};
showModalSave = location => {
this.setState({
modalVisible: true,
location,
});
};
closeModalSave = () => {
const { location } = this.state;
const { history } = this.props;
this.setState({
modalVisible: false,
});
history.push({
pathname: `..${location.pathname}`,
});
};
handlePrompt = location => {
if (!this.isSave) {
this.showModalSave(location);
return false;
}
return true;
};
handleSave = () => {
const { location } = this.state;
const { history } = this.props;
this.isSave = true;
console.log(location.pathname, 'pathname75');
history.push({
pathname: `..${location.pathname}`,
});
this.setState({
modalVisible: false,
});
this.saveAll();
};
<Prompt message={this.handlePrompt}/>
<Modal title="提示"
visible={modalVisible}
onCancel={this.closeModalSave}
closable={false}
centered
footer={null}
>
<div>是否保存修改？</div>
<div>
<Button onClick={this.closeModalSave}>
不保存
</Button>
<Button onClick={this.handleSave}>
保存
</Button>
</div>
</Modal>
完美实现离开页面，路由拦截的同时，显示自定义模态框！