React项目中点击图片跳转外部链接避免路径拼接的方法

云上老周

2026-8-18

解决外部链接被拼成本地路径的问题

你的问题根源有两个：

错误给原生<a>标签使用了React Router专属的to属性，原生跳转链接应该用href
如果content.link是不带协议的相对路径（比如example.com），浏览器会默认把它当成当前域名下的子路径拼接

修正步骤：

将<a>标签的to属性替换为原生的href属性
确保content.link是完整的外部URL（包含http://或https://），如果后端返回的链接不带协议，可在代码中自动补全

修正后的代码：

const ContCard = ({content,col}) => {
  // 自动补全协议：如果链接不带http/https前缀，添加https://
  const getFullLink = (link) => {
    if (!link.startsWith('http://') && !link.startsWith('https://')) {
      return `https://${link}`;
    }
    return link;
  };

  return (
    <div className={`col-sm-12 col-md-6 col-lg-${col} my-3`}>
      <div className='card p-3 rounded'>
        <a
          href={getFullLink(content.link)}
          target="_blank" 
          rel="noreferrer"                    
        >
          <img 
            className='card-image-top mx-auto'
            src={content.images[0].url} 
            width="250" height="200"
          />
        </a>                  
        <div className='card-body d-flex flex-column'>
          <h5 className='card-title'>
            <div>{content.title}</div>
          </h5>
        </div>
      </div>
    </div>
  )
}

export default ContCard;