React.js中如何让href链接在右侧新标签页打开？

你这段代码的问题出在window.open的参数顺序写错了，而且没必要用onClick来实现新标签页跳转，<a>标签本身就有原生属性可以搞定。

错误原因 #

window.open的正确参数顺序是第一个为要打开的URL，第二个为窗口目标。你现在把"_blank"放在第一个参数位置，相当于打开了一个空白页面，同时<a>标签的默认跳转行为（在当前页打开PDF）还是会触发，所以才会出现简历在左侧当前页打开的情况。

正确写法（推荐） #

直接用<a>标签的target="_blank"属性，这是最符合HTML规范的方式，还能顺便加上安全属性：

<a href={resume} target="_blank" rel="noopener noreferrer">
  Resume
</a>

• target="_blank"：指定链接在新标签页打开
• rel="noopener noreferrer"：安全属性，防止新打开的页面通过window.opener获取原页面的控制权，避免安全风险

若坚持使用window.open的写法 #

需要修正参数顺序，同时阻止<a>标签的默认跳转行为：

<a href={resume} onClick={(e) => {
  e.preventDefault(); // 阻止默认的当前页跳转
  window.open(resume, "_blank"); // 正确参数顺序：URL在前，目标在后
}}>
  Resume
</a>

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