[노마드코더] 페이지따라 id적용하기

일단 페이지 구성은 

 

영화 제목을 누르면 그 영화에 대해서 상세페이지로 연결이 된다.

 

즉, 영화 제목누르면 detail 컴포넌트로 연결이 된다.

 

그래서 detail페이지로 들어갔을때 url이 /movie/4564654  이런식으로 되야한다.

 

그래서 기존에 

<Route path="/movie" element={<Detail />} />

이렇게 되어있던 코드를 밑의 코드로 바꿨다.

<Route path="/movie/:id" element={<Detail />} />

 

그리고 Home 컴포넌트로 넘어가서

id를 부여했다. 밑의 코드처럼

 {movies.map(movie => (
            <Movie
              id={movie.id}    //id부분 추가했다
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}

 

그리고 movie컴포넌트로 가서

link부분에 id를 추가했다.

기존의 이거를

<Link to={`/movie`}>{title}</Link>

밑의 코드로 바꿨다.

<Link to={`/movie/${id}`}>{title}</Link>