如何使用JavaScript或React.js检测用户是否通过URL地址栏访问现有页面

没有原生的JavaScript或React专属API可以100%精准识别这个场景，可通过浏览器提供的标准API组合判断：

• 通用JavaScript实现方案
  核心依赖两个属性组合判断：

  1. document.referrer：如果值为空，说明用户不是从其他页面跳转进入
  2. 性能API的导航类型字段，判断是否为首次直接导航
     推荐使用新标准的PerformanceNavigationTiming接口实现：

  const navTiming = performance.getEntriesByType('navigation')[0];
  // 导航类型为直接导航+无来源，大概率是地址栏输入/书签打开/桌面快捷方式打开
  const isAddressBarAccess = navTiming?.type === 'navigate' && !document.referrer;
  

  如果需要兼容旧浏览器，可以用已废弃但兼容性尚好的performance.navigation接口：

  const isAddressBarAccess = performance.navigation.type === 0 && !document.referrer;
  

• React项目集成方案
  以React Router v6为例，可在全局路由监听逻辑中注入判断：

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  // 全局路由守卫组件
  export default function RouteGuard({ children }) {
    const { pathname } = useLocation();
  
    useEffect(() => {
      const navTiming = performance.getEntriesByType('navigation')[0];
      const isAddressBarAccess = navTiming?.type === 'navigate' && !document.referrer;
      if (isAddressBarAccess) {
        // 此处写入自定义逻辑：比如权限校验、访问统计、跳转引导等
        console.log(`用户通过地址栏访问页面：${pathname}`);
      }
    }, [pathname]);
  
    return children;
  }
  

注意事项：该判断存在极小概率误判，比如第三方网站跳转时配置了rel="noreferrer"属性，也会导致document.referrer为空，可根据业务场景补充其他校验逻辑降低误判率。

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