Javascript 反应路由器dom中的自定义提示组件。防止页面重新加载

我正在使用react router dom中的提示符创建我的自定义组件，以防止用户从弹出窗体离开

const SignUpForm = () => {

  const { fields, onChange, onSubmit } = useFormState();

  const isEmpty = Object.keys(fields).length === 0;

  usePreventReload(!isEmpty);

  const promptMessage = useMemo(() => JSON.stringify({ fields }), [fields]);

  return (
    <form
      onSubmit={onSubmit}
      noValidate
      autoComplete="off"
    >
      <h2>Sign Up</h2>
      <Prompt when={!isEmpty} message={promptMessage} />
      <TextField
        label="First Name"
        name="firstName"
        onChange={onChange}
      />
        ...

      <Button type="submit" variant="contained" color="secondary">
        Send
      </Button>
    </form>
  );
};

const SignUpForm=（）=>{
const{fields，onChange，onSubmit}=useFormState（）；
const isEmpty=Object.keys（fields）.length==0；
使用防止重新加载（！isEmpty）；
const promptMessage=usemo（（）=>JSON.stringify（{fields}），[fields]）；
返回(
注册
...
发送
);
};

如果您没有在表单中键入任何内容，则可以毫无问题地关闭弹出窗口。当您在任何字段中填充一些值，然后尝试关闭弹出窗口时，您将看到一个自定义弹出窗口，其中有一条警告，您可能会丢失数据。 除了一种情况——重新加载页面外，它工作得非常好。为此，我使用了侦听器“beforeundload”，但在这种情况下，我们只能使用系统对话框。但在这种情况下也可以使用自定义组件吗

我创建了一个简单的演示，让您更好地理解-

---

有人知道这种情况的解决方法吗？

您可以捕获窗口事件“beforeUnload”以本机方式执行此操作，如下所示

因此，在componentDidMount中，您添加了如下事件侦听器

window.addEventListener('beforeunload', this.pageRefreshFunction);

然后在componentWillUnmount中，您可以删除此事件侦听器，因为当用户转到其他页面（如

 window.removeEventListener('beforeunload', this.pageRefreshFunction);

然后PageRefresh函数应该有弹出触发器

但是根据下面的参考资料，不再允许自定义弹出窗口，您只能使用本机浏览器特定的弹出窗口

---

正如我所想，谢谢你。定制组件是不可能的