React如何打开外部链接 解决跳转时URL自动拼接本地域名前缀问题

你遇到的跳转拼接本地域名的问题，核心原因是传入的companyUrl没有带http://或https://协议头，浏览器会默认将没有协议头的路径识别为当前站点的相对路径，因此会自动拼接上当前域名。

给传入的链接统一补全协议头即可，你可以在跳转前新增一个URL格式化的逻辑：

const CompanyCard = ({name, address, postcode, companyUrl}: company) => {
const handleViewEmployees = (name: string) => {
console.log(name);
}

// 新增URL格式化逻辑
const formatExternalUrl = (url: string) => {
  // 判断是否已经带有http/https协议头
  if(!/^https?:\/\//i.test(url)) {
    return `https://${url}`
  }
  return url
}

const openInNewTab = (url: string) => {
    // 先格式化再跳转
    const formattedUrl = formatExternalUrl(url)
    const newWindow = window.open(formattedUrl, '_blank', 'noopener,noreferrer')
    if (newWindow) newWindow.opener = null
}

return (
    <>
    <td>{name}</td>
    <td>{address}</td>
    <td>{postcode}</td>
    {/* 优化点：也可以把格式化后的url直接放到href属性，兼容右键打开等场景 */}
    <td><a href={formatExternalUrl(companyUrl)} target="_blank" rel="noopener noreferrer" onClick={(e) => {
      // 如果你要保留自定义open逻辑可以阻止默认跳转，否则可以直接删掉onClick用a标签原生能力即可
      e.preventDefault()
      openInNewTab(companyUrl)
    }}>{companyUrl}</a></td>
    <td><button onClick={() => handleViewEmployees(name)}>View Employees</button></td>
    </>
)
}

export default CompanyCard;

• 如果你的业务场景允许传入http协议的链接，可以把格式化的默认前缀改成//让浏览器自动匹配当前站点的协议，不过更推荐统一用https://避免混合内容报错。
• 直接用a标签原生的target="_blank"加rel="noopener noreferrer"已经可以满足大部分新标签页打开外部链接的需求，不需要额外封装js跳转逻辑，可以根据你的业务需要选择是否保留自定义的openInNewTab方法。

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