如何检测/处理React中的后退按钮？

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      if (action === 'POP') {
        // 后退按钮被点击
        // 处理逻辑
      }
    });

    return () => {
      unlisten(); // 在组件卸载时取消订阅
    };
  }, [history]);

  return <div>My Component</div>;
}

function MyComponent() {
  useEffect(() => {
    const handlePopstate = () => {
      // 后退按钮被点击
      // 处理逻辑
    };

    window.addEventListener('popstate', handlePopstate);

    return () => {
      window.removeEventListener('popstate', handlePopstate); // 在组件卸载时移除事件监听器
    };
  }, []);

  return <div>My Component</div>;
}

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function MyComponent() {
  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      if (action === 'POP') {
        // 后退按钮被点击
        // 处理逻辑
      }
    });

    return () => {
      unlisten(); // 在组件卸载时取消订阅
    };
  }, []);

  return <div>My Component</div>;
}