인프런 커뮤니티 질문&답변

안녕하세요 강사님!

이번학기에 갑자기 웹 개발을 하게 되어 부랴부랴 프론트 강의 챙겨보는중인데 정말 도움이 많이 돼 우선 감사의 말씀 먼저 드립니다. ㅜㅜ

다름이 아니라 제가 본 영상 강의를 보고 학교 과제를 수행하다가

(투두 리스트를 참고하여 만들었습니다. 참고로 과제는 이슈관리 시스템입니다.)

이러한 메인 화면을 구현하였는데,

각 프로젝트 이름을 누르면 그 프로젝트의 상세 페이지로 연결 시키고 싶은데,

라우터 기능을 사용하여 링크는 제대로 바뀌는데 화면 전환이 되지 않습니다. ㅜㅜ

코드를 여러번 봐도 무엇이 문제인지 감이 안 잡혀 질문 드리게 되었습니다.

코드 첨부 하겠습니다. !

import "./App.css";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import { useRef, useState } from "react";
import Header from "./components/Header";
import List from "./components/List";
import ProjectDetail from "./pages/ProjectDetail";

//임시데이터
const mokdata = [
  {
    p_id: 0,
    p_name: "회원가입 프로젝트",
    date: new Date().getTime(),
  },
  {
    p_id: 1,
    p_name: "온라인 테트리스 게임 프로젝트",
    date: new Date().getTime(),
  },
  {
    p_id: 2,
    p_name: "윷놀이 프로젝트",
    date: new Date().getTime(),
  },
  {
    p_id: 3,
    p_name: "온라인 채팅 앱 개발 프로젝트",
    date: new Date().getTime(),
  },
  {
    p_id: 4,
    p_name: "회원 관리 시스템 프로젝트",
    date: new Date().getTime(),
  },
  {
    p_id: 5,
    p_name: "이슈 관리 시스템 프로젝트",
    date: new Date().getTime(),
  },
];

function App() {
  const [projects, setProjects] = useState(mokdata);
  const onDelete = (targetId) => {
    //배열에서 targetId와 일치하는 id를 갖는 요소만 삭제한 새로운 배열
    setProjects(projects.filter((project) => project.p_id !== targetId));
  };

  return (
    <>
      <div className="App">
        <Header />
        <List projects={projects} onDelete={onDelete} />
      </div>
      <Routes>
        <Route
          path="/ProjectDetail:p_id"
          element={<ProjectDetail projects={projects} />}
        />
      </Routes>
    </>
  );
}

export default App;

위는 App.jsx 코드 이고

아래는 ProjectDetail 코드 입니다. !

import { useParams } from "react-router-dom";

const ProjectDetail = ({ projects }) => {
  const { p_id } = useParams();
  const project = projects.find((project) => project.p_id === parseInt(p_id));
  return (
    <div>
      <h1>프로젝트 상세내용</h1>
      <h2>{project.p_name}</h2>
    </div>
  );
};

export default ProjectDetail;