react-router를 이용해 앱 내에서 라우팅기능을 지원해보겠다. 원래는

이 문서의 내용을 참고해서 구현해보려고 했으나…

react-router 2.7.0을 사용하고 있는 위의 문서와 달리 최신 react-router 4.0.0이상의 버전에서는 Router를 react-router-dom에서 지원하는 등 구조가 다소 바뀌었기 때문에 부득이하게 다른 문서들도 참고하였다.

먼저 react-router-dom을 npm으로 설치해준다.

앞서 언급했듯이 react-router에 있었던 Router 등의 컴포넌트가 react-router-dom으로 옮겨졌기 때문에 react-router-dom을 설치해야 한다.

App component에서는 BrowserRouter를 가져와서 앱 전체를 감싸준다. div를 Route로 변경하지 않고 다시 Route로 감싸준 이유는 Route의 child component는 반드시 1개여야 하기 때문이다. Route의 path에 따라서 해당 path에 속하지 않는 component는 라우팅시 보이지 않게 된다. 현재는 ‘/’이하 필터이름이 변수로 들어오기 때문에 필터 선택에 관계 없이 모든 요소는 항상 노출된다.

참고로 현재 todos목록은 이전에 구현해놓은 그대로 todos state 중에서 filter state에 따라 필터링되는 것일 뿐 라우팅으로 인해 다른 요소가 보여지는 것은 아니다.

components/Filter.js

주로 수정되는 부분은 Filter.js이다. Filter component에서는 react-router-dom의 Link component를 가져와 ‘to’ property로 라우팅해준다. 현재는 모든 todos를 가져오는 ‘ALL’ filter가 적용될 경우에는 루트(‘/’) uri가, completed todos는 ‘/COMPLETED’가, not completed todos는 ‘/NOT_COMPLETED’가 각각 매칭되어있다.

각각의 link를 클릭해줄 경우

Image for post
Image for post
clicked ‘COMPLETED’

다음과 같이 라우팅이 성공적으로 이루어진다.

Github Source Code

woohyun

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store