React组件中如何通过参数生成无localhost前缀的跳转链接

• React Router 内置的 <Link> 组件仅用于站内路由跳转，所有不带协议头（http/https）的路径都会被识别为站内相对路径，因此会自动拼接当前站点的域名前缀生成跳转地址。
• 你定义的linkab变量值没有加协议头，自然会被判定为站内路径，最终生成带localhost的拼接地址。

方法1：用原生a标签跳转（最推荐） #

外部链接直接用HTML原生<a>标签即可，同时一定要给目标地址补全协议头：

// 补全https协议头
let linkab = 'https://www.example.com/about';

// 直接用a标签渲染
<a href={linkab}>About</a>

// 如果需要新窗口打开，增加对应属性即可
<a href={linkab} target="_blank" rel="noopener noreferrer">About</a>

方法2：强制Link组件跳转外部链接 #

如果必须使用Link组件，可以通过点击事件拦截默认站内跳转逻辑，手动触发外部跳转：

let linkab = 'https://www.example.com/about';

<Link 
  to={linkab}
  onClick={(e) => {
    // 阻止默认的站内路由跳转行为
    e.preventDefault();
    // 手动跳转外部地址
    window.location.href = linkab;
  }}
>
  About
</Link>

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