浏览器beforeunload不生效

以React代码为例：
代码这样写是正确的，但是有时候就是不触发怎么办：
原因是如果页面没有任何交互（如，鼠标点击，键盘操作），是不触发beforeunload的，否则一旦有了任何的交互，就会正常触发。
在正常的使用中，这是合理的，应该算是浏览器的一个交互优化。

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      const message = "你确定要离开此页面吗？未保存的更改将会丢失。";
      event.returnValue = message; // 标准做法
      return message; // 兼容性
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

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

  return (
    <div>
      <h1>React 页面关闭询问示例</h1>
      {/* 其他组件内容 */}
    </div>
  );
}

export default App;