React跳转外部链接时useEffect清理函数不执行的解决方法

问题场景 #

在React组件中点击按钮跳转外部页面时，组件的useEffect清理函数不会触发，导致用户返回原页面后按钮仍处于禁用状态：

const CompA = () => {
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    const blaBla = "nothing";

    return () => {
      console.log("Component unmounted");
      setLoading(false);
    };
  }, []);

  const handleSubmit = () => {
    setLoading(true);
    window.location.href = "//google.com";
  };

  return (
    <button onClick={handleSubmit} disabled={loading}>Link</button>
  );
};

直接修改window.location.href会让页面立即跳转，组件不会经历正常的卸载流程，所以useEffect的清理函数根本不会执行，导致返回后按钮还是disabled状态。需要在跳转外部链接时重置loading状态，确保返回后按钮恢复可用。

解决办法 #

1. 监听beforeunload事件 #

浏览器的beforeunload事件会在页面即将卸载（包括跳转外部链接、关闭标签页）时触发，我们可以利用这个事件来重置状态：

const CompA = () => {
  const [loading, setLoading] = useState(false);
  
  useEffect(() => {
    const resetLoading = () => {
      setLoading(false);
    };

    // 添加页面卸载监听
    window.addEventListener('beforeunload', resetLoading);

    // 组件正常卸载时也要清理监听和重置状态
    return () => {
      window.removeEventListener('beforeunload', resetLoading);
      setLoading(false);
    };
  }, []);

  const handleSubmit = () => {
    setLoading(true);
    window.location.href = "//google.com";
  };

  return (
    <button onClick={handleSubmit} disabled={loading}>Link</button>
  );
};

这个方法最可靠，因为beforeunload会精准捕获页面跳转的时机，确保状态重置逻辑执行。

2. 跳转前延迟执行状态重置 #

如果不想用事件监听，也可以在跳转前加个短暂延迟，确保状态更新生效：

const handleSubmit = () => {
  setLoading(true);
  // 延迟100ms足够React完成状态更新，再跳转并重置状态
  setTimeout(() => {
    setLoading(false);
    window.location.href = "//google.com";
  }, 100);
};

不过这种方法依赖延迟时间，极端情况下可能失效，仅作为备选方案。

3. 用sessionStorage持久化状态（兜底方案） #

如果前两种方法都有问题，可以借助sessionStorage来保存状态，返回页面时读取正确的状态值：

const CompA = () => {
  // 初始化时从sessionStorage加载状态
  const [loading, setLoading] = useState(() => {
    return sessionStorage.getItem('loading') === 'true';
  });

  // 状态变化时同步到sessionStorage
  useEffect(() => {
    sessionStorage.setItem('loading', loading.toString());
  }, [loading]);

  const handleSubmit = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      sessionStorage.setItem('loading', 'false');
      window.location.href = "//google.com";
    }, 100);
  };

  return (
    <button onClick={handleSubmit} disabled={loading}>Link</button>
  );
};

这种方法通过持久化状态，确保页面返回时能读取到重置后的状态值，避免按钮一直禁用。

内容的提问来源于stack exchange，提问作者Hany Darwish