react-router-dom

react-router-dom을 활용해서 react에서 간단히 router를 만들어 줄 수 있다.

여러 종류가 있지만 우리는 gh-pages에 최적화된 HashRouter를 사용할 것이다.

 

npm i react-route-dom

App.js에서 아래와 같은 Route를 만들 것이다.

/

/home

/about

각 url에 구분을 해주려고한다. /은 home으로 영화List를 보여주고 /about은 그냥 소개페이지이고 /movie/:id는 각 영화를 누르면 그 영화가 나오도록 해주었다. 여기서 /에는 exact={true}옵션을 주었는데 이것을 주지 않게되면 겹치는 URL전부다 component가 실행이 된다. 예를들어 '/'는 '/' + 'about'에도 들어가있기 때문에 /의 component가 about url에서도 동시에 동작을 한다. 마찬가지로 /home /home/abc 이것도 '/home', '/home' + '/abc'이므로 /home의 component가 /home/abc에서도 실행이 된다. ( 2개의 컴포넌트가 실행 ) 따라서 exact옵션을 주면 이 URL외에서는 동작을 하지 않도록 설정해 주는 역할을 한다.

먼저 HashRouter에서 제일먼저 실행되는 것은 Navigator component이다 이건 직접 만든 것인데,

components라는 폴더를만들고 거기에 만들어주었다. css도 만들어 깔끔하게 해주었다.

 

Navigator.js

여기서 다른 url로 넘어갈 수 있는 a tag를 만들어 주려고했다. a herf='/about'을하면 

이런식으로 새로고침이 되어 적용이 안되버리기 때문에 Link라는 react-route-dom의 기능을 빌려쓰면 새로고침없이 URL의 이동만 가능하게 해준다. Link는 to 옵션을 주는데 단순히 url만적어줄 수도 있고 obj을 주어서 좀더 기능을 줄 수도 있다. 여기서 주의할 점이 있다. Router밖에선 link를 쓸 수 없다. 만약 Navigator를 HashRouster밖에 두면 Link기능을 상실하게 된다.   모든걸 다 router안에다 쓰지 않아도된다. 하지만 Link를 사용하려면 꼭 Router안에 넣어사용해야한다.

 

그다음 Route에 path='/' component={Home}은 전에 movie.js의 기본 페이지이고 about은

이렇게 간단하게 만들었다.

우리가 Route안에 component를 주면 기본적으로 props에 객체가 부여되는데 history, locaion과 같은 것들이 들어있다. 

Movie.js

각 movie의 title을 누르면 link -> /movie/id로 가도록 url을 만들어 주었다. 여기선 to에 단순히 string url말고 obj를 넣어주었다. pathname은 url을 적고 state에는 자기가 보내고 싶은 정보를 입력하면 된다. 이렇게 넣어주고 Detail에서 cosole로 this.props를 찍어보면 아래와같은 obj가 보인다

우리가 보낸 정보는 this.props.location.state안에 잘 저장이 되어있는 것을 확인할 수 있다. 이로써 정보공유를 할 수 있다. 아래는 간단히 그 정보를 가져와서 title만 보여주는 기능을 만들어주었다. 그리고 여기서 Link로 들어가면 이러한 정보가 담겨있지만 단순히 url을 타고 들어가면 정보가 들어있지 않을 것이다. 이때에는 this.props.history.push('/')를 해줌으로써 home으로 redirecting이 가능하다.