React中map函数渲染列表时如何为不同项配置独立内部链接

问题根源是map遍历渲染轮播项时，所有<Link>的href属性被硬编码成了固定路径，要实现不同轮播项跳转不同内部页面，只需要两步操作：

• 第一步：修改数据源ShowcassesFullScreenData，给每个slide配置项新增专属跳转链接字段（比如命名为pageLink），每个项填入自己对应的内部页面路径即可，数据格式参考：

const ShowcassesFullScreenData = [
  {
    id: 1,
    image: "项目1封面图地址",
    title: { first: "项目1", second: "介绍" },
    pageLink: "/project-details/project-1" // 第一个项目的专属跳转路径
  },
  {
    id: 2,
    image: "项目2封面图地址",
    title: { first: "项目2", second: "介绍" },
    pageLink: "/project-details/project-2" // 第二个项目的专属跳转路径
  },
  // 其余轮播项按相同规则配置对应pageLink即可
]

• 第二步：把渲染代码里两处写死的href固定值，替换为当前遍历项slide上的pageLink字段，修改后的完整渲染代码如下：

{ShowcassesFullScreenData.map((slide) => (
  <SwiperSlide key={slide.id} className="swiper-slide">
    <div className="full-width">
      <div
        className="bg-img valign"
        style={{ backgroundImage: `url(${slide.image})` }}
        data-overlay-dark="1"
      >
        <div className="caption ontop valign">
          <div className="o-hidden">
            <h1 data-swiper-parallax="-2000">
              <Link
                href={slide.pageLink}
                passHref
              >
                <a>
                  <div className="stroke">{slide.title.first}</div>
                  <span>{slide.title.second}</span>
                </a>
              </Link>
            </h1>
          </div>
        </div>
        <div className="copy-cap valign">
          <div className="cap">
            <h1 data-swiper-parallax="-2000">
              <Link
                href={slide.pageLink}
                passHref
              >
                <a>
                  <div className="stroke">{slide.title.first}</div>
                  <span>{slide.title.second}</span>
                </a>
              </Link>
            </h1>
          </div>
        </div>
      </div>
    </div>
  </SwiperSlide>
))}

补充优化：如果你的项目详情页用的是动态路由（比如路径规则为/project-details/[项目id]），可以不用额外给每个数据项加pageLink字段，直接用已有的slide.id拼接路径即可，写法为href={/project-details/${slide.id}}，只要和你本地的路由配置规则匹配就能正常跳转。

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