我试图呈现一个带有标题、图像和文本的新组件，但是我得到一个错误，路径不存在。
路由中的路径为：

<Route path="article/:name" element={<WholeArticle />} />

这个组件是这样写的：

function WholeArticle() {
  let params = useParams();
  const [details, setDetails] = useState({});

  const fetchDetails = async () => {
    const data = await fetch(
      `https://newsapi.org/v2/${params.name}&apiKey=${process.env.REACT_APP_API_KEY}`
    );

    const detailData = await data.json();
    setDetails(detailData);
  };
  console.log(setDetails);

  useEffect(() => {
    fetchDetails();
  }, [params.name]);

  return (
    <div>
      <h2>{details.title}</h2>
      <img src={details.img} />
      <p>{details.content}</p>
    </div>
  );
}

export default WholeArticle;

WholeArticle组件应该在我单击一篇文章时呈现，因此我添加了一个Link to Article组件：

<Link to={"article/" + article.id}>

感谢您抽出宝贵时间！