Javascript 在 React JS 中单击项目时导航到子文件夹中的页面

我对JS的react 非常陌生，但我看了一些关于如何建立我自己的投资组合的视频教程.我想映射我的投资组合项目，其中包含一个图像，标题，描述，角色和链接.我设法映射了所有东西，除了指向各自投资组合项目详细页面的链接.

有没有人能帮我弄明白我做错了什么，以及如何解决？

这是我的文件夹 struct :

src => pages保留主页面，src => pages => case-studies保留我的投资组合项目的详细页面.

以下是我到目前为止所得到的信息:

Work.jsx在src=&gt；Pages文件夹中

import React, { useEffect, useState } from "react";
import Loader from "./Loader";
import "./Work.css";
import WorkCard from "./WorkCard";
import WorkData from "./WorkData";

const Work = () => {
  return (
    <div className="work">
      <section className="work-section">
        <div className="card">
          <h1 className="underline">My portfolio</h1>
          <p>Here are the case studies of my projects...</p>

          <div className="grid-layout grid-2">
            {
              WorkData.map((val, index) => {
                return (
                  <WorkCard
                    key={index}
                    url={val.url}
                    image={val.image}
                    name={val.name}
                    description={val.description}
                    role={val.role} />
                 );
              })
            }
          </div>
        </div>
      </section>
    </div>
  );
}

export default Work;

WorkCard.jsx在src=&gt；Pages文件夹中

import React from "react";
import { NavLink } from "react-router-dom";

const WorkCard = (props) => {
  return (
    <NavLink to={props.url} className="tile-card">
      <img src={props.image} alt={props.name} />
      <div className="details">
        <h2>{props.name}</h2>
        <p className="description" title={props.description}>{props.description}</p>
        <h4 className="role" title={props.role}>Role: {props.role}</h4>
      </div>
    </NavLink>
  );
}

export default WorkCard;

WorkData.jsx在src=&gt；Pages文件夹中

import EcoPizza from "../assets/project-icons/ecoPizza.webp";
import Squared from "../assets/project-icons/Squared.webp";
import { EcoPizzaCaseStudy, SquaredCaseStudy } from "./case-studies";

const WorkData = [
  {
    "image": EcoPizza,
    "name": "The UX portfolio item name",
    "description": "This is description part",
    "role": "My role in that project",
    "url": EcoPizzaCaseStudy
  },
  {
    "image": Squared,
    "name": "The UX portfolio item name",
    "description": "This is description part",
    "role": "My role in that project",
    "url": SquaredCaseStudy
  }
];

export default WorkData;

index.js在src=&gt；Pages=&gt； case 研究文件夹中

export { default as EcoPizzaCaseStudy } from "./eco-pizza/EcoPizzaCaseStudy";
export { default as SquaredCaseStudy } from "./squared/SquaredCaseStudy";

App.js个

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Navigation } from "./components/Navigation";
import { Home, About, Work, Contact, PageNotFound, UnderConstruction } from "./pages";
import { Footer } from "./components/Footer";

function App() {
  return (
    <div className="App">
      <Router>
        <Navigation />
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/work" element={<Work />} />
            <Route path="/under-construction" element={<UnderConstruction />} />
            <Route path="/contact" element={<Contact />} />
            <Route path='*' element={<PageNotFound />}/>
          </Routes>
        </main>
        <Footer />
      </Router>
    </div>
  );
}

export default App;