如何判断浏览器点击后退还是前进按钮？React场景解决方案

浏览器的popstate事件本身无法直接区分前进或后退操作，需要通过手动维护状态来判断。以下是React项目中的具体实现方式：

核心思路 #

通过自定义历史记录的索引值，每次导航时更新索引，触发popstate事件时对比当前索引与上一次索引的大小，判断是后退（索引减小）还是前进（索引增大）。

代码实现 #

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom'; // 若使用react-router

function YourComponent() {
  // 用ref存储上一次历史记录的索引，避免组件重渲染丢失值
  const lastHistoryIndex = useRef(history.state?.index ?? 0);
  const navigate = useNavigate();

  useEffect(() => {
    const handlePopState = () => {
      const currentIndex = history.state?.index ?? 0;
      // 索引减小说明是后退操作
      if (currentIndex < lastHistoryIndex.current) {
        someFunction(); // 执行你的特定操作
      }
      // 更新上一次索引为当前值
      lastHistoryIndex.current = currentIndex;
    };

    window.addEventListener('popstate', handlePopState);
    // 组件卸载时移除监听
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  // 自定义导航方法，手动维护历史记录索引（替代直接调用navigate）
  const customNavigate = (path) => {
    const nextIndex = lastHistoryIndex.current + 1;
    navigate(path, { state: { index: nextIndex } });
    lastHistoryIndex.current = nextIndex;
  };

  return (
    <div>
      {/* 示例：使用自定义导航跳转 */}
      <button onClick={() => customNavigate('/some-path')}>跳转页面</button>
    </div>
  );
}

// 你的特定操作函数
function someFunction() {
  console.log('仅在后退时执行');
}

说明 #

1. 索引维护：每次通过自定义导航跳转时，手动生成并传递下一个索引值到历史状态中，确保历史记录的索引连续递增。
2. popstate判断：触发popstate时，对比当前历史状态的索引与上一次存储的索引，索引减小则判定为后退操作。
3. 兼容性：该方案依赖history.state的自定义字段，兼容所有支持HTML5 History API的浏览器，覆盖绝大多数现代浏览器场景。

内容的提问来源于stack exchange，提问作者Abdel-Rahman