如何在ReactJS中添加跳转至外部站点的超链接？

错误原因 #

你遇到的跳转路径异常是因为误用了React Router的Link组件：

• Link是专门用于React应用内部路由跳转的组件，不会识别http/https开头的外部站点URL，只会将to属性的值当作内部相对路径，拼接在当前站点域名后，所以才会出现localhost:3000/https://xxx的错误跳转地址。

解决方法 #

直接使用原生HTML的<a>标签处理外部站点跳转即可，示例代码如下：

<a href="https://www.washfort.com" target="_blank" rel="noopener noreferrer">
  <img src={logodark} height="100" alt="logo" />
</a>

补充说明 #

• target="_blank"配置新窗口打开链接时，必须搭配rel="noopener noreferrer"属性，避免出现安全漏洞。
• 不要使用Link组件处理外部跳转需求，该组件的设计定位就是内部路由专用。

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