React 16.3.2在IE11中刷新后已访问链接状态未保留问题

我之前在处理IE11兼容的React项目时碰到过一模一样的问题——Chrome里正常保留的:visited样式，到了IE11刷新页面就完全失效。这主要是因为IE11对:visited伪类有特殊的隐私限制，加上它对页面刷新后的状态持久化逻辑和现代浏览器不同。结合你的React 16.3.2场景，给你几个可行的解决方案：

一、手动追踪访问状态（最可靠的方案） #

因为IE11不允许脚本读取:visited的状态，也不会在刷新后自动保留这个状态，我们可以用localStorage来手动记录用户点击过的链接，然后通过自定义类来模拟:visited的样式效果：

1. 组件中添加状态追踪逻辑 #

import React, { useState, useEffect } from 'react';

function AnchorLinkComponent() {
  // 初始化已访问链接列表，从localStorage读取历史记录
  const [visitedLinks, setVisitedLinks] = useState(() => {
    const saved = localStorage.getItem('visitedAnchorLinks');
    return saved ? JSON.parse(saved) : [];
  });

  // 处理链接点击事件，记录访问过的链接
  const handleAnchorClick = (e) => {
    const fullHref = e.target.href;
    if (!visitedLinks.includes(fullHref)) {
      const updatedLinks = [...visitedLinks, fullHref];
      setVisitedLinks(updatedLinks);
      localStorage.setItem('visitedAnchorLinks', JSON.stringify(updatedLinks));
    }
  };

  // 辅助函数：判断链接是否已访问
  const isLinkVisited = (href) => {
    const fullHref = window.location.origin + href;
    return visitedLinks.includes(fullHref);
  };

  return (
    <div className="anchor-container">
      <a 
        href="#section1"
        className={isLinkVisited('#section1') ? 'visited' : ''}
        onClick={handleAnchorClick}
      >
        跳转到Section 1
      </a>
      <a 
        href="#section2"
        className={isLinkVisited('#section2') ? 'visited' : ''}
        onClick={handleAnchorClick}
      >
        跳转到Section 2
      </a>
      {/* 其他锚点链接同理 */}
    </div>
  );
}

export default AnchorLinkComponent;

2. 修改CSS样式 #

把原来依赖:visited的样式，加上自定义的.visited类，同时保留原有伪类兼容现代浏览器：

/* 兼容Chrome等现代浏览器的伪类 */
a:visited, a:hover, a:focus, a:active,
/* 专门给IE11用的自定义类 */
a.visited {
  color: #551A8B !important;
}

二、检查URL匹配完整性 #

IE11的:visited对URL的匹配要求更严格，确保你的锚点链接是完整的绝对路径（包括域名和哈希），而不是相对路径。比如用window.location.origin + '#section1'代替直接写#section1，这样IE11才能正确识别访问状态。

三、注意动态生成链接的渲染逻辑 #

如果你的锚点链接是通过数组循环动态生成的，一定要在每次渲染时重新检查localStorage中的记录，确保对应的链接能正确加上.visited类，避免因为React的渲染机制导致状态不更新。

补充说明 #

IE11对:visited的限制是出于隐私保护设计，它会限制脚本获取链接的访问状态，所以手动记录是目前唯一能稳定解决这个问题的方法。这个方案不仅能解决刷新后的状态丢失问题，还能在用户关闭浏览器重新打开后依然保留访问记录。

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