Anchor标签右键「在新标签页打开链接」跳转路径异常问题

右键点击<a>链接选择「在新标签页打开」时，会跳转至带#的当前页面路径，而非window.open指定的目标URL。例如实际打开http://localhost:4020/#，而非预期的https://www.google.com/。

问题根源：右键打开链接时，浏览器会直接触发<a>标签的href属性完成跳转，而onClick事件仅在左键点击时触发。当前代码中href="#"，所以右键打开会跳转到当前页面的锚点路径。

提供两种可行的修复方式：

方式一：同步href与目标URL并阻止默认行为 #

将href直接设置为目标URL，同时在onClick中阻止默认行为，避免左键点击时重复打开页面：

<a 
  href="https://www.google.com/" 
  onClick={(e) => {
    e.preventDefault();
    window.open('https://www.google.com/', '_blank');
  }}
>
  View more
</a>

• 左键点击：执行window.open打开新标签页
• 右键「在新标签页打开」：直接使用href中的目标URL跳转

方式二：移除onClick，直接依赖<a>原生属性 #

如果不需要额外逻辑处理，直接用标签原生属性即可实现需求，代码更简洁：

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
  View more
</a>

• target="_blank"：指定在新标签页打开链接
• rel="noopener noreferrer"：安全优化，防止新打开的页面篡改当前页面（可选但推荐）

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