antd 如何监听浏览器返回事件

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

antd 如何监听浏览器返回事件，我现在使用以下几种方式，但是hashchange和popstate这两个事件我监听不到

💻 示例代码

const myHistory = useHistory();

useEffect(() => { const handle = () => { console.log(2132444); localStore.setItem('addDetail', JSON.stringify(formRef.current?.getFieldsValue())); }; const visibHandle = () => { if (document.visibilityState === 'hidden') { localStore.setItem('addDetail', JSON.stringify(formRef.current?.getFieldsValue())); } };

// // beforeunload popstate visibilitychange
window.addEventListener('beforeunload', handle);
window.addEventListener('hashchange', handle);
window.addEventListener('popstate', handle);
window.addEventListener('visibilitychange', visibHandle);

return () => {
  window.removeEventListener('beforeunload', handle);
  window.removeEventListener('hashchange', handle);
  window.removeEventListener('popstate', handle);
  window.removeEventListener('visibilitychange', visibHandle);
};

}, []);

useEffect(() => { const unlisten = myHistory.listen(() => { // 在这里可以执行你的逻辑 localStore.setItem('addDetail', JSON.stringify(formRef.current?.getFieldsValue())); });

return () => {
  // 组件卸载时取消监听
  unlisten();
};

}, [myHistory]);

🚑 其他信息

我的版本是

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

antd 是一个基于 React 的 UI 组件库，它本身并不提供监听浏览器返回事件的功能。但是可以通过 React Router 或者 useHistory 这样的路由库来实现监听浏览器返回事件的需求。

在给出解决方案之前，我先简要介绍一下 React Router 和 useHistory。

React Router 是一个用于构建单页应用的第三方路由库，它提供了一些 API 来操作历史记录，其中包括监听浏览器返回事件。

useHistory 是 React Router 中的一个 Hook，它返回一个 history 对象，可以使用该对象上的方法来操作路由和监听浏览器返回事件。

接下来是针对你的代码片段给出的解决方案：

首先，确保你已经正确引入了 React Router 和 useHistory。

然后，在 useEffect 中监听 'beforeunload'、'hashchange' 和 'visibilitychange' 事件，监听函数为 handle 和 visibHandle。

最后，使用 useHistory 函数获取 history 对象，然后在另一个 useEffect 中使用 listen 方法监听路由变化，监听函数为一个箭头函数，你可以在监听函数中执行你的逻辑。

最后的代码示例如下：

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

const YourComponent = () => {
  const history = useHistory();

  useEffect(() => {
    const handle = () => {
      console.log(2132444);
      // 在这里执行你的逻辑
    };

    const visibHandle = () => {
      if (document.visibilityState === 'hidden') {
        // 在这里执行你的逻辑
      }
    };

    window.addEventListener('beforeunload', handle);
    window.addEventListener('hashchange', handle);
    window.addEventListener('visibilitychange', visibHandle);

    return () => {
      window.removeEventListener('beforeunload', handle);
      window.removeEventListener('hashchange', handle);
      window.removeEventListener('visibilitychange', visibHandle);
    };
  }, []);

  useEffect(() => {
    const unlisten = history.listen(() => {
      // 在这里执行你的逻辑
    });

    return () => {
      unlisten();
    };
  }, [history]);

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

请注意，上述解决方案基于 React Router 和 useHistory 来实现监听浏览器返回事件，如果你没有使用 React Router 或者 useHistory，或者你使用的路由库和 useHistory 的用法不同，请提供更多的信息，以便给出更具体的解决方案。

ant-design / pro-components