如何在React.js中检测浏览器后退按钮的启用与禁用状态？

核心思路 #

浏览器没有直接暴露后退按钮状态的原生API，我们需要通过监听历史记录变化+主动追踪导航栈的方式，实现是否可后退的判断。

具体实现方案（React 环境） #

1. 自定义导航栈追踪（推荐） #

在React应用中，自行维护导航栈状态，记录用户的页面跳转路径，以此精准判断是否支持后退：

import { useState, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function useBackButtonStatus() {
  const location = useLocation();
  const navigate = useNavigate();
  const [canGoBack, setCanGoBack] = useState(false);
  const [historyStack, setHistoryStack] = useState([location.pathname]);

  useEffect(() => {
    // 路径变化时更新导航栈
    setHistoryStack(prev => {
      // 处理前进/后退操作（非新跳转场景）
      if (prev.includes(location.pathname)) {
        return prev.slice(0, prev.indexOf(location.pathname) + 1);
      }
      // 新页面跳转，追加到栈中
      return [...prev, location.pathname];
    });
  }, [location.pathname]);

  useEffect(() => {
    // 栈长度大于1时，说明存在可后退的历史
    setCanGoBack(historyStack.length > 1);
  }, [historyStack]);

  return canGoBack;
}

// 组件内使用示例
function App() {
  const canGoBack = useBackButtonStatus();

  return (
    <div>
      <button onClick={() => navigate(-1)} disabled={!canGoBack}>
        {canGoBack ? '后退' : '无法后退'}
      </button>
    </div>
  );
}

2. 结合popstate事件与初始状态判断 #

利用浏览器popstate事件监听历史变化，搭配初始加载状态辅助判断：

import { useState, useEffect } from 'react';

function useCanGoBack() {
  const [canGoBack, setCanGoBack] = useState(false);

  useEffect(() => {
    // 初始加载时判断基础状态
    const checkInitialStatus = () => {
      // 单页应用首次加载时history.length通常为1，且document.referrer为空
      const isFirstLoad = history.length === 1 && document.referrer === '';
      setCanGoBack(!isFirstLoad);
    };

    checkInitialStatus();

    // 监听历史记录变化
    const handlePopState = () => {
      // 历史变化后，通过history.length结合场景判断
      setCanGoBack(history.length > 1);
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  return canGoBack;
}

关键注意事项 #

• history.length的局限性：它包含所有历史记录（包括前进记录），不能直接用history.length > 1判断，但结合事件监听和自定义栈可优化准确性。
• 跨域限制：document.referrer在跨域跳转时会为空，仅能作为辅助判断依据。
• 单页/多页差异：单页应用路由不刷新页面，必须通过自定义栈追踪；多页应用可结合popstate事件和初始加载状态判断。

内容的提问来源于stack exchange，提问作者Code Machine