umiJS Prompt react antD 如何监听页面跳转变化?(实现防止页面编辑内容消失,提示用户的作用)

Question

如题.
现需要监听页面跳转(a链接),给出"是否放弃编辑,离开当前页面?"的提示.

如使用 umiJS Prompt ,如下组件是如何与页面的a链接关联的 ?

import Prompt from 'umi/prompt';

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

Answer 1

看你选择的路由方案，假设你使用的是history来切路由，那实现的代码可能如下：

    constructor(props) {
        super(props);

        this.unblock = history.block((location, action) => {
          if (this.state.isDirty) {
            return `confirm to leave to ${location.pathname}?`;
          }
        });
    }

具体参考文档：https://github.com/ReactTrain...