如何在React.js中为数组格式数据添加超链接？

我想通过把URL信息存入数据数组的方式添加超链接，但带href的a标签没达到预期效果。请问是否应该使用react-router-dom的Link标签？或是在Goods.js中添加{link}有什么解决思路？

1. Shop.js #

export const Shop = () => {
  return (
    <div className="shop">
      <div className="shop-title">
        <h1>Anime Biased Shop</h1>
      </div>
      <div className="items">
        {ItemsList.map((item) => (
          <Goods shopItemProps={item} />
        ))}
      </div>
    </div>
  );
};

2. Goods.js #

import React, { useState } from "react";

export const Goods = (props) => {
  const { id, name, price, image, link } = props.shopItemProps;
  const [count, setCount] = useState(0);
  return (
    <>
      <div className="goods">
        <div>{id}</div>
        <img src={image} alt="thumbnail_image" />
        <div className="goods-name">{name}</div>
        <div className="goods-price">${price}</div>
        <a href={link} />
        <div className="cart-button">
          <button onClick={() => setCount(count - 1)}>-</button>
          {count}
          <button onClick={() => setCount(count + 1)}>+</button>
        </div>
      </div>
    </>
  );
};

3. ItemsList.js（数据数组文件） #

export const ItemsList = [
  {
    id: 1,
    name: "VA-11 Hall-A: Cyberpunk Bartender Action",
    price: 110000,
    image: cover1,
    link: "https://store.steampowered.com/app/447530/VA11_HallA_Cyberpunk_Bartender_Action/?l=koreana",
  },
];

1. 修复a标签无效问题
   你当前写的<a href={link} />是自闭合标签，没有任何可点击内容，所以既看不到也无法触发跳转。需要给a标签添加可交互的文本或元素，比如把商品名称做成链接，或者添加一个跳转按钮：

// 方案1：将商品名称作为跳转链接
<div className="goods-name">
  <a href={link} target="_blank" rel="noopener noreferrer">{name}</a>
</div>

// 方案2：添加独立的"查看详情"按钮
<a href={link} target="_blank" rel="noopener noreferrer" className="detail-btn">查看详情</a>

跳转到外部网站时，建议加上target="_blank"（新开窗口打开）和rel="noopener noreferrer"，这是前端安全规范，防止恶意网站通过window.opener获取页面控制权。

2. 是否需要用react-router-dom的Link？
   不需要。Link组件是React Router专为单页应用内部路由跳转设计的（比如从商品列表页跳转到本站的商品详情页），而你这里是跳转到第三方外部网站，原生a标签完全适用，没必要用Link。

3. 额外优化：添加列表key属性
   在Shop.js的map循环中，给每个Goods组件加上key属性，这是React列表渲染的强制要求，能避免控制台警告：

{ItemsList.map((item) => (
  <Goods key={item.id} shopItemProps={item} />
))}

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