如何为React项目卡片配置点击跳转外部URL的锚点标签

步骤1：修改/data/projects.js，给每条项目新增外部URL字段 #

在每条项目配置中增加url字段，填入对应项目的外部访问地址：

const projects = [
  {
    id: 'a',
    name: 'YoLo ecommerce',
    desc: ' chlotes for women, created in React.js',
    img: Yolo,
    url: 'https://你的YoLo项目实际外部地址' // 新增字段，填写真实链接
  },
  {
    id: 'b',
    name: 'My Crypto Tracker',
    desc: 'An App to see the Crypto market. React.js/Chart.js',
    img: Trade,
    url: 'https://你的Crypto项目实际外部地址' // 新增字段，填写真实链接
  },
]

步骤2：修改/pages/projects.js，给ProjectItem组件传递URL参数 #

在遍历渲染ProjectItem的逻辑中，新增传递项目url参数：

<div className="projects__allItems">
  {projectsData.map((item) => (
    <ProjectItem
      key={item.id}
      title={item.name}
      desc={item.desc}
      img={item.img}
      projectUrl={item.url} // 新增传递url参数
    />
  ))}
</div>

步骤3：修改/components/projectItem.js，替换路由Link为原生a标签 #

原本的Link是React路由内置组件，仅支持站内路由跳转，外部跳转需要使用原生a标签实现：

export default function ProjectItem({
  img = ProjectImg,
  title = 'Project Name',
  desc = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  projectUrl = '/' // 新增入参，默认值可根据需求调整
}) {
  return (
    <ProjectItemStyles>
      {/* 替换路由Link为a标签处理外部跳转，新增的target和rel属性为外部跳转安全标准配置 */}
      <a href={projectUrl} target="_blank" rel="noopener noreferrer" className="projectItem__img">
        <img src={img} alt="project img" />
      </a>
      <div className="projectItem__info">
        <Link to="#">
          <h3 className="projectItem__title">{title}</h3>
        </Link>
        <p className="projectItem__desc">{desc}</p>
      </div>
    </ProjectItemStyles>
  );
}

如果需要项目标题也同步跳转外部链接，把标题外层的Link组件也替换为相同配置的a标签即可。

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