• Link 태그는 router 밖에서 사용할 수 없다.
  • 그러므로 사용하려면 router 안에 있어야한다.

• router 를 사용할 때
  • HashRouter
  • BrowserRouter
    • github page에 정확하게 설정하기가 좀 까다롭다
    • 그래서 HashRouter를 사용한다.

• react-router-dom 에서 <Link to"(path)">를 넣고,

page에서 영화를 누르면 누른 영화의 정보만 볼 수 있는 페이지로 이동하기

• 두개의 컴포넌트를 동시에 렌더링하려면 가장 바깥에 fragment(<> </>)로 감싸줘야한다.

route props

• in about.js,
  • 모든 컴포넌트에는 props가 있다.
  • Movie.js에서 props들을 보내고있다.
  • 이렇게 링크를 통해 정보를 라우터로 보낼 수 있다.

• Detail.js 에서 {location}으로 props를 보내보고 콘솔을 찍어보니,

{location: {…}}
location: {pathname: "/movie-detail", state: {…}, search: "", hash: ""}
[[Prototype]]: Object

로 나왔다.

{year: 2013, title: "Doctor Who The Day of the Doctor", summary: "In 2013, something terrible is awakening in London…ncient battle reaches its devastating conclusion.", poster: "https://yts.mx/assets/images/movies/doctor_who_the_day_of_the_doctor_2013/medium-cover.jpg", genres: Array(6)}

로 정보를 가져왔다.

에러 해결

pathname: `/movie/${id}`,

• 영화 포스터를 클릭하면 url이 해당영화의 id를 가리키게 할 수 있도록 설정하는 것 이었는데, 처음에는 '' 따옴표로 입력을 하는 바람에 /movie/${id} 이게 그대로 url로 나와서 보기 거슬렸다. 근데 props에서 id에 색이 안 들어와 있어서 분명히 사용되고 있지 않다는 걸 알고 있었다.
• 문제를 백틱``을 사용하니 바로 해결되고 id에 불도 들어왔다.