退出时路由保护,用于表单场景防止用户误操作退出。

一、window 的 onbeforeunload 事件

1
2
3
4
5
6
7
8
useEffect(() => {
  window.onbeforeunload = () => {
    return "表单离开保护";
  };
  return () => {
    window.onbeforeunload = null;
  };
}, []);

Prompt

message return 则不触发拦截,另外可以设 when 属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<Prompt
  message={({ pathname: p }, action) => {
    if (action === "REPLACE") return true;

    if (!p.startsWith("/ad-master-plat/promote-mgt/flow")) {
      return "系统可能不会保存您所做的更改。";
    }
    return true;
  }}
/>