React中用户确认刷新时重定向至主页的实现问题

首先得跟你说清楚为啥你之前的方法不管用——浏览器出于安全和用户体验的考虑，完全禁止在beforeunload事件里执行页面跳转操作，这个事件的设计初衷只是让你弹出确认提示，没法控制用户确认之后的行为，所以useNavigate和window.location.href在这里都会失效。

结合你是多人游戏用了Socket.io的场景，给你两个可行的解决方案：

方案一：页面重新加载时完成重定向（最稳妥的方式） #

我们可以用会话存储标记用户确认了刷新/离开操作，等页面重新加载时再跳转到主页：

1. 先在handleBeforeUnload里添加标记并处理Socket逻辑：

const handleBeforeUnload = (event) => {
    event.preventDefault();
    event.returnValue = ""; // 弹出确认提示
    // 用sessionStorage存一个跳转标记，会话结束会自动清除
    sessionStorage.setItem("needRedirectToHome", "true");
    // 顺便处理Socket.io的断开逻辑，告诉服务器玩家离开
    socket.emit("playerLeave", { roomId: yourRoomId });
    socket.disconnect();
};

2. 然后在App组件的初始化逻辑里检查这个标记，完成跳转：

const navigate = useNavigate();

useEffect(() => {
    // 页面加载时检查标记
    const shouldRedirect = sessionStorage.getItem("needRedirectToHome");
    if (shouldRedirect === "true") {
        // 用完标记立刻删除，避免重复跳转
        sessionStorage.removeItem("needRedirectToHome");
        navigate("/");
    }

    // 绑定/解绑beforeunload监听
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
        window.removeEventListener("beforeunload", handleBeforeUnload);
    };
}, [navigate]);

补充说明 #

• 如果你需要标记持久化（比如用户关闭浏览器再打开也要跳转），可以把sessionStorage换成localStorage，但记得一定要在跳转后删除标记，不然每次打开页面都会跳。
• Socket.io的清理逻辑放在beforeunload里是没问题的，断开连接、发送离开事件这类操作浏览器不会限制，能保证服务器及时更新房间状态。

备注：内容来源于stack exchange，提问作者GuizmoU