React作品集按钮跳转链接错误问题求助

问题原因 #

你遇到的跳转地址异常，是因为误用了React Router的<Link>组件来跳转外部网站。<Link>仅适用于应用内部路由跳转，它会把外部URL当成相对路径拼接到当前页面URL后，才出现了https://matthew-younger-portfolio.herokuapp.com/portfolio/https://diamond-developers-tech-blog.herokuapp.com/这类错误地址。

修复方法 #

修改你的ProjectCard组件，将跳转外部链接的<Link>替换为原生HTML的<a>标签，并添加安全属性：

// ProjectCard组件示例代码
const ProjectCard = ({ imagesource, title, text, view, github }) => {
  return (
    <div className="project-card">
      <img src={imagesource} alt={title} />
      <h3>{title}</h3>
      <p>{text}</p>
      {/* 查看项目按钮 */}
      <a 
        href={view} 
        target="_blank" 
        rel="noopener noreferrer" 
        className="view-btn"
      >
        查看项目
      </a>
      {/* GitHub仓库按钮 */}
      <a 
        href={github} 
        target="_blank" 
        rel="noopener noreferrer" 
        className="github-btn"
      >
        GitHub仓库
      </a>
    </div>
  )
}

注意事项 #

• 你现有ProjectData里的view和github字段都是完整的绝对URL（以https://开头），格式正确无需修改。
• target="_blank"让链接在新窗口打开，rel="noopener noreferrer"是浏览器安全规范要求，可防止新页面劫持当前页面。

内容的提问来源于stack exchange，提问作者Matthew Younger-Chudnovsky