react hooks 监听浏览器前进，后退，刷新和关闭

你可以使用 `useEffect` 钩子来监听浏览器前进、后退和刷新事件，但是关闭浏览器窗口的事件不是很好处理。

下面是一个使用 `useEffect` 监听浏览器前进、后退和刷新事件的例子：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleHistoryChange = () => {
      console.log('History changed!');
    };
    
    window.addEventListener('popstate', handleHistoryChange);
    window.addEventListener('beforeunload', handleHistoryChange);

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

  return <div>App content</div>;
}

在这个例子中，我们添加了两个事件监听器：`popstate` 和 `beforeunload`。`popstate` 事件会在浏览器的前进、后退和刷新操作时触发，而 `beforeunload` 事件会在页面即将卸载时触发。我们在 `useEffect` 钩子中添加了这两个事件监听器，并在组件卸载时移除它们。

需要注意的是，`beforeunload` 事件的处理方式因浏览器而异，有些浏览器不支持 `beforeunload` 事件的取消，因此在处理该事件时需要小心。