超链接跳转页面时document.referrer返回空串导致返回按钮不显示如何解决

document.referrer为空并非只有用户直接访问页面的情况，以下场景都会触发该值返回空字符串，所以仅靠该字段判断是否显示返回按钮的逻辑本身存在缺陷：

• 跨域场景下的跳转
• 用户从浏览器书签、地址栏直接输入网址访问
• 上级页面的超链接设置了rel="noreferrer"属性
• HTTPS站点跳转到HTTP站点
• 用户通过新窗口/新标签页打开当前页面

优先改用history.length结合路径判断的逻辑：history.length统计值包含当前页面，只要数值大于1就说明存在可回退的历史记录，配合非首页的判断即可满足需求：

window.location.pathname !== '/' && window.history.length > 1 ? 
    <a href="javascript:history.go(-1)">
        <button type="button">
            Back
        </button>
    </a> : null

如果需要规避「回退到外部站点」的场景，可以配合sessionStorage记录用户站内访问轨迹，自定义回退逻辑可控性更高：

1. 公共全局逻辑里记录用户站内访问路径
2. 判断轨迹长度大于1且当前非首页时，显示返回按钮
3. 点击返回时直接取上一条站内路径跳转，不用依赖浏览器原生历史记录

// 全局轨迹存储逻辑
const visitHistory = JSON.parse(sessionStorage.getItem('siteVisitHistory') || '[]')
const currentPath = window.location.pathname
// 避免同路径重复存储
if (visitHistory[visitHistory.length - 1] !== currentPath) {
  visitHistory.push(currentPath)
  sessionStorage.setItem('siteVisitHistory', JSON.stringify(visitHistory))
}

// 返回按钮渲染逻辑
window.location.pathname !== '/' && visitHistory.length > 1 ? 
    <a href={visitHistory[visitHistory.length - 2]}>
        <button type="button">
            Back
        </button>
    </a> : null

如果需要兼容低版本浏览器，将示例中at()语法替换为数组下标取值即可。

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