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

拾光过客
  • 619

如题.
现需要监听页面跳转(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}?`);
        }}
      />
    </>
  );
}
回复
阅读 5.6k
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...

宣传栏