React项目中浏览器回退触发triggerDisband函数问题求助

针对你遇到的浏览器回退按钮无法触发triggerDisband函数的问题，结合react-router-dom的路由机制，可通过以下方式覆盖所有目标场景：

1. 补充监听原生popstate事件 #

浏览器回退/前进按钮会触发原生popstate事件，需要在组件挂载时添加监听，并在卸载时移除：

import { useRef } from 'react';

// 用于标记是否已触发过清理逻辑，避免重复调用
const isDisbandTriggered = useRef(false);

useEffect(() => {
    // 每次组件挂载时重置标记
    isDisbandTriggered.current = false;

    if (!SocketManager.instance.roomId) {
        navigate('/')
    }

    // ... 原有EventsManager事件监听代码

    // 添加beforeunload和popstate事件监听
    window.addEventListener('beforeunload', triggerDisband);
    window.addEventListener('popstate', triggerDisband);

    // ... 原有setTimeout代码

    // 清理函数：移除事件监听
    return () => {
        window.removeEventListener('beforeunload', triggerDisband);
        window.removeEventListener('popstate', triggerDisband);
    };
}, []);

2. 组件卸载时触发清理逻辑 #

当通过react-router-dom的navigate函数跳转（比如页面内返回按钮）导致组件卸载时，在清理函数中主动调用triggerDisband：

useEffect(() => () => {
    // ... 原有移除EventsManager监听的代码

    // 组件卸载时触发清理逻辑
    triggerDisband();
}, []);

3. 处理路由参数变更（组件未卸载）场景 #

如果组件在路由参数变化时不会卸载（比如从/game/1跳转到/game/2），需要监听location变化来触发逻辑：

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

// 获取当前路由location对象
const location = useLocation();

useEffect(() => {
    // 路由变化时触发清理（组件未卸载的场景）
    return () => {
        triggerDisband();
    };
}, [location]);

4. 避免重复触发优化 #

由于popstate事件和组件卸载可能同时触发（比如浏览器回退操作），通过ref标记避免重复调用triggerDisband：

const triggerDisband = () => {
    if (isDisbandTriggered.current) return;
    isDisbandTriggered.current = true;
    EventsManager.instance.trigger(SocketEvents.ON_GAME_LEAVE, {});
};

覆盖场景说明 #

• 窗口关闭/浏览器刷新：由beforeunload事件处理
• 直接修改URL跳转：由beforeunload事件处理
• 浏览器回退/前进按钮：由popstate事件处理
• 页面内路由跳转（navigate函数）：由组件卸载时的清理函数处理
• 路由参数变更（组件未卸载）：由location监听处理

内容的提问来源于stack exchange，提问作者Clorox Bleach