页面刷新时执行JS函数断开连接，不显示onbeforeunload弹窗

你的现有代码触发确认弹窗的核心原因是调用了event?.preventDefault()，同时返回值的处理也可能触发浏览器的默认确认逻辑。以下是修正后的实现方案：

修正后的代码 #

useEffect(() => {
  const disconnect = () => {
    // 直接执行Socket断开操作，无需修改事件对象或返回值
    socketRef.current?.disconnect();
  };

  window.addEventListener('beforeunload', disconnect);
  return () => {
    window.removeEventListener('beforeunload', disconnect);
  };
}, [navigate]);

关键修改点说明 #

• 移除event?.preventDefault()：浏览器会将beforeunload事件中调用preventDefault()的行为判定为需要用户确认是否离开页面，必须删除该操作。
• 不返回任何值：如果事件处理函数返回非undefined的值，同样会触发确认弹窗，因此保持函数无返回逻辑即可（明确返回undefined也可，但无返回更简洁）。
• 添加可选链保护：给socketRef.current加上?.，避免在Socket实例未初始化时出现报错。

特殊场景补充（异步断开需求） #

如果你的Socket断开操作是异步的，或者需要确保请求能在页面卸载前完成，可以使用navigator.sendBeacon来发送断开请求（需后端配合提供接口）：

const disconnect = () => {
  const socketId = socketRef.current?.id;
  if (socketId) {
    navigator.sendBeacon('/api/disconnect-socket', JSON.stringify({ socketId }));
  }
};

内容的提问来源于stack exchange，提问作者Vivek Srivastava