通过检查 document.referrer 是否为空字符串，可可靠区分用户是直接在地址栏输入 URL（或书签访问、新标签页粘贴打开）还是通过站内跳转或刷新进入页面——刷新时 referrer 通常保留，而直接链接访问时该值为空。
通过检查 document.referrer 是否为空字符串，可可靠区分用户是直接在地址栏输入 url（或书签访问、新标签栏粘贴打开）还是通过站内跳转或刷新进入页面——刷新时 referrer 通常保留，而直接链接访问时该值为空。
在前端开发中，常需对“首次直接访问”场景（如分享链接、SEO 进入、手动输入 URL）执行特定逻辑（如埋点上报、初始化状态、展示引导弹窗），但需避免与页面刷新（F5 / Cmd+R）或浏览器前进/后退混淆。你当前使用 history.action === 'POP' 的方式不可靠，因为现代浏览器在页面刷新后，history.action 可能被重置为 'POP'（尤其在 React Router v5/v6 的某些生命周期中），导致误判。
更稳健的方案是依赖浏览器原生属性 document.referrer：
- ✅ 直接链接访问（含地址栏输入、书签点击、新标签页粘贴 URL、微信/QQ 内置浏览器外部跳转）：
document.referrer为空字符串（''）； - ✅ 站内导航（如
<link>点击、navigate()调用）：referrer为上一页的完整 URL（同源或跨域均可能）； - ⚠️ 页面刷新：
referrer通常保持不变（即仍为上一页 URL），除非是首次打开该标签页（此时为空）；因此它天然不将刷新误判为直接访问。
示例代码（React 函数组件中安全使用）：
import { useEffect } from 'react';
function MyPage() {
useEffect(() => {
// 注意：document.referrer 在服务端渲染（SSR）中不可用，务必在客户端执行
if (typeof window !== 'undefined') {
const isDirectLink = document.referrer === '';
if (isDirectLink) {
console.log('✅ 页面由用户直接访问（非站内跳转）');
// 执行你的专属逻辑：埋点、初始化、展示欢迎弹窗等
triggerDirectAccessAction();
} else {
console.log('➡️ 页面由站内导航或刷新进入，referrer:', document.referrer);
}
}
}, []);
return <div>My Page Content</div>;
}
function triggerDirectAccessAction() {
// 示例：上报直接访问事件
window.gtag?.('event', 'direct_landing', { page_path: window.location.pathname });
// 或初始化某些仅首次直达时需要的状态
}
⚠️ 注意事项：
-
document.referrer受Referrer-PolicyHTTP 头影响（如设置为no-referrer会导致始终为空），请确保服务端未过度限制； - 在单页应用（SPA）中，
referrer值反映的是整个 SPA 首次加载时的来源，而非当前路由切换的来源（因为后续路由变化不触发新 referrer）； - 不要与
performance.navigation.type混用（该 API 已废弃，且无法区分“直接输入”和“刷新”）； - 若需更高精度（如排除跨域 referrer 干扰），可结合
document.referrer.startsWith(window.location.origin)判断是否为同源导航。
综上，document.referrer === '' 是目前最轻量、兼容性好（支持所有现代浏览器及 IE11）、语义明确的直接访问检测方案，应作为首选替代 history.action 的误判逻辑。
