Ant-design-pro: 如何在路由跳转前提示用户离开确认

[WangJM001]

用户跳转路由时，需要提示用户当前页面的数据尚未保存，提示用户离开确认，确认框能不能用antd 的Model.confirm组件？
这个在ant d pro v2里要怎么处理？

[chenshuai2144]

现在好像不行
@sorrycc 支持拦截器吗？

[sorrycc]

参考 https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router

[WangJM001]

参考 https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router

使用Prompt，是不是没法用antd的confirm组件了

[sorrycc]

Prompt 可以支持函数的，具体看 react-router 的文档。

比如：

<Prompt
  when={true}
  message={(location) => {
    return window.confirm(`confirm to leave to ${location.pathname}?`);
  }}
/>

[KiraYo4kage]

Prompt 可以支持函数的，具体看 react-router 的文档。

比如：

<Prompt
  when={true}
  message={(location) => {
    return window.confirm(`confirm to leave to ${location.pathname}?`);
  }}
/>

message所传函数的返回值为string|boolean，也不支持promise，所以如果把window.confirm换成其他antd的confirm组件，就无法阻止路由跳转，只弹出confirm。这个怎么解决呢？

[lioder]

Prompt 可以支持函数的，具体看 react-router 的文档。
比如：

<Prompt
  when={true}
  message={(location) => {
    return window.confirm(`confirm to leave to ${location.pathname}?`);
  }}
/>

message所传函数的返回值为string|boolean，也不支持promise，所以如果把window.confirm换成其他antd的confirm组件，就无法阻止路由跳转，只弹出confirm。这个怎么解决呢？

<Prompt
  when={this.state.isPrompt}
  message={location => {
    Modal.confirm({
      title: '提示',
      content: '确认退出吗？系统可能不会保存当前表单',
      okText: 'Yes',
      cancelText: 'No',
      onOk: () => {
        this.setState({
          isPrompt: false,
        }, () => {
          router.push(location.pathname);
        });
      },
    });
    return false;
  }}
/>

@KiraYo4kage