ReactJS-不确定如何使项目重定向到外部链接

我正在尝试建立一个新的投资组合网站，这是我在React的第一次。我遇到了一个问题，我想包括从作品集剧照到外部页面的链接。我尝试的工作方式是使用一个data.js文件，该文件由公文包项目组成，但我希望在返回的项目周围包装一个链接，但我收到了错误：

data.js代码：

export const featuredPortfolio = [
    {
      id: 1,
      title: "Social Media App",
      img:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKvdHn8GmPGCO0y3SJqNHACygpm0h9VycMHg&usqp=CAU",
        url: "https://www.google.com",
    },
    {
      id: 2,
      title: "Rampa UI Design",
      img:
        "https://cdn.dribbble.com/users/702789/screenshots/15054318/media/4ea5d492b7b07eebc9528ff960794879.png?compress=1&resize=1200x900",
    },
    {
      id: 3,
      title: "E-commerce Web Design",
      img:
        "https://cdn.dribbble.com/users/1387827/screenshots/15466426/media/deb2dca6762cd3610321c98bfccb0b72.png?compress=1&resize=1200x900",
    },
    {
      id: 4,
      title: "Relax Mobile App",
      img:
        "https://cdn.dribbble.com/users/4095861/screenshots/15467417/media/d6a15c416626f12b31fa5ca1db192572.png?compress=1&resize=1200x900",
    },
    {
      id: 5,
      title: "Hero Web Design",
      img:
        "https://cdn.dribbble.com/users/5031392/screenshots/15467520/media/c36b3b15b25b1e190d081abdbbf947cf.png?compress=1&resize=1200x900",
    },
    {
      id: 6,
      title: "Banking App",
      img:
        "https://cdn.dribbble.com/users/3307260/screenshots/15468444/media/447b4501f7a145b05e11c70199a9c417.jpg?compress=1&resize=1200x900",
    },
  ];

Portfolio.jsx代码：

import { useEffect, useState } from "react";
import PortfolioList from "../portfoliolist/portfoliolist";
import "./portfolio.scss";
import {
  featuredPortfolio,
  webPortfolio,
  mobilePortfolio,
} from "../../data";
import { Link } from "@material-ui/core";

export default function Portfolio() {
  const [selected, setSelected] = useState("featured");
  const [data, setData] = useState([]);
  const list = [
    {
      id: "featured",
      title: "Featured",
    },
    {
      id: "web",
      title: "Web App",
    },
  ];

  useEffect(() => {
    switch (selected) {
      case "featured":
        setData(featuredPortfolio);
        break;
      case "web":
        setData(webPortfolio);
        break;
      case "mobile":
        setData(mobilePortfolio);
        break;
      default:
        setData(featuredPortfolio);
    }
  }, [selected]);

  return (
    <div className="portfolio" id="portfolio">
      <h1>Portfolio</h1>
      <ul>
        {list.map((item) => (
          <PortfolioList
            title={item.title}
            active={selected === item.id}
            setSelected={setSelected}
            id={item.id}
          />
        ))}
      </ul>
      <div className="container">
        {data.map((d) => (
          <div className="item">
            <img
              src={d.img}
              alt=""
            />
            <h3>{d.title}</h3>
          </div>
        ))}
      </div>
    </div>
  );
}

从“react”导入{useffect，useState}；
从“./PortfoliList/PortfoliList”导入PortfoliList；
导入“/portfolio.scss”；
进口{
特色Portfolio，
webPortfolio，
mobilePortfolio，
}来自“../../data”；
从“@material ui/core”导入{Link}”；
导出默认函数组合（）{
const[selected，setSelected]=useState（“特色”）；
const[data，setData]=useState（[]）；
常数列表=[
{
id:“特色”，
标题：“特色”，
},
{
id:“网络”，
标题：“Web应用程序”，
},
];
useffect（（）=>{
开关（选定）{
案例“特色”：
setData（功能文件夹）；
打破
案例“网络”：
setData（webPortfolio）；
打破
“手机”案例：
setData（mobilePortfolio）；
打破
违约：
setData（功能文件夹）；
}
}，[选定]；
返回(
文件夹

{list.map（（项）=>(
))}

{data.map（（d）=>(
{d.title}
))}
);
}

---

任何指点都会非常有用-谢谢

在map函数中添加一个a标记，使href成为指向外部url的链接

<a href={d.url}> Visit site </a>

要使其在新选项卡中打开，请添加

<a href={d.url} target="_blank" > Visit site </a>

---

是否希望在新选项卡中显示图像（重定向到新选项卡）？