如何区分页面直接访问与刷新触发，避免误执行指定操作？

你当前使用history.action === 'POP'的问题在于：页面刷新、浏览器前进后退都会触发POP操作，无法区分**直接链接访问（地址栏输入/粘贴链接进入）**和刷新的场景。

以下是两种可靠的判断方案：

方案一：利用Performance API识别导航类型 #

现代浏览器提供的PerformanceNavigationTiming API可以精准区分导航类型，不同场景对应不同的type值：

• navigate：通过地址栏输入/粘贴链接、点击外部链接、脚本跳转（如window.location.href）等方式加载页面（包含直接访问）
• reload：页面刷新（包括F5、浏览器刷新按钮）
• back_forward：浏览器前进/后退操作

代码示例：

import { useEffect } from 'react';

const YourComponent = () => {
  useEffect(() => {
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    if (navigationEntry.type === 'navigate') {
      // 仅在直接链接访问时执行操作
      console.log('用户通过直接链接进入页面');
      // 这里放入你的特定操作逻辑
    }
  }, []);

  return <div>Your Component</div>;
};

方案二：结合路由状态双重验证 #

如果需要更精准区分直接访问和站内脚本跳转（如React Router的history.push），可以结合路由状态判断：

• 直接访问时，history.state（或React Router v6的location.state）为空
• 站内跳转时，路由库会自动给state添加内部标识（如key属性）

React Router v5示例：

import { useHistory, useEffect } from 'react-router-dom';

const YourComponent = () => {
  const history = useHistory();

  useEffect(() => {
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    // 同时满足导航类型为直接加载、路由状态为空，才判定为直接链接访问
    if (navigationEntry.type === 'navigate' && !history.state) {
      console.log('用户通过直接链接进入页面');
      // 执行你的特定操作
    }
  }, [history.state]);

  return <div>Your Component</div>;
};

React Router v6示例（useHistory已替换为useLocation）：

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

const YourComponent = () => {
  const location = useLocation();

  useEffect(() => {
    const navigationEntry = performance.getEntriesByType('navigation')[0];
    if (navigationEntry.type === 'navigate' && !location.state) {
      console.log('用户通过直接链接进入页面');
      // 执行你的特定操作
    }
  }, [location.state]);

  return <div>Your Component</div>;
};

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