클릭했을 때 동적으로 상세페이지 연결하기(Route)

리액트 라우터를 사용하면 된다.

1. 라우터를 설치해줍니다. import를 해준다.

import { Route, Routes, Link, useParams } from "react-router-dom";

2. App.js에서 주소를 만들어준다.

        <Route
          path="/profiles/:profileIdInUrl"
          element={
            <DetailedProfile
			...
            ></DetailedProfile>
          }
        ></Route>

:을 쓰면, 저 뒤에 아무거나 써도 된다. 아무거나 쓰는 데로 그 주소로 이동한다.
3. 상세페이지전 전체 엘리먼트를 갖고 있는 컴포넌트에 Link to 연결한다. 이제 클릭하는 엘리먼트의 id를 :뒤에 넣게된다.

  const studentInfoMap = student.map((info, i) => (
    <div key={i} className={`${info.color} profiles__profile`}>
      <Link to={`/profiles/:${info.id}`}>
        <p className="profiles__profile__name">{info.name}</p>
      </Link>
    </div>
  ));

4. useParams로 url에서 :뒷부분을 받아온다. 이제 이 받아온 값으로 또 학생을 찾는다.

  const { profileIdInUrl } = useParams();
  
  //맨 앞에 ":"이 붙어서 첫글자를 잘랐다.
  const profileId = profileIdInUrl.slice(1);
  const detailedStudent = student.find((el) => el.id == profileId);

5.:뒷부분을 이용해 대상을 특정하고 렌더링 한다.

return {detailedStudent.hour};