React函数组件右键新标签页打开多标签问题及解决尝试

你的核心问题是手动触发a标签点击+全局右键事件监听的组合逻辑，导致右键操作时重复打开标签页。下面是问题分析和修正方案：

原代码的问题点 #

1. 手动创建a标签并触发click：这会在左键点击时强制打开一次新标签，而浏览器原生的右键“在新标签页打开”操作又会触发一次，最终导致多个标签页。
2. 全局contextmenu监听：给window添加右键事件阻止默认行为，会影响整个页面的右键菜单，完全没必要，且无法解决重复跳转问题。
3. window.history.back()：这会让当前页面后退，不符合导航到目标页面的需求。

修正方案 #

直接使用React原生的<a>元素，浏览器会自动处理左键点击（新标签打开）和右键菜单操作，无需手动DOM操作或事件监听。

修正后的组件代码 #

const NavigationComponent = ({ url, title, urls }) => {
  // 如需自定义点击逻辑（比如埋点统计），在此添加即可，不要阻止默认行为
  const handleLinkClick = () => {
    console.log('链接被点击');
  };

  // 当存在目标url时，渲染跳转链接；否则显示默认iframe
  if (url) {
    return (
      <a
        href={url}
        target="_blank"
        rel="noopener noreferrer" // 安全属性，防止新页面访问原页面上下文
        onClick={handleLinkClick}
      >
        打开目标页面
      </a>
    );
  }

  return <iframe title={title} src={urls.default} />;
};

关键说明 #

• 原生标签的优势：浏览器内置支持左键点击新标签打开、右键“在新标签页打开”等操作，不会出现重复跳转的问题。
• rel="noopener noreferrer"：这是安全最佳实践，避免新打开的页面通过window.opener访问原页面的敏感信息，同时提升新页面的加载性能。
• 避免手动DOM操作：React的虚拟DOM机制已经能高效处理DOM渲染和事件，手动创建元素并触发click属于冗余操作，容易引发冲突。