NavLink로 만들어진 Category 컴포넌트에 to 값은 "/카테고리이름"으로 설정해 주었습니다. 그리고 카테고리 중에서 전체보기의 경우는 예외적으로 "/all" 대신에 "/"로 설정했습니다. to 값이 "/"를 가리키고 있을 때는 exact 값을 true로 해 주어야 합니다. 이 값을 설정하지 않으면, 다른 카테고리가 선택되었을 때도 전체보기 링크에 active 스타일이 적용되는 오류가 발생합니다.

작업을 마쳤다면, 카테고리를 클릭할 때 페이지 주소가 바뀌고 이에 따라 뉴스 목록을 잘 보여 주는지 확인하세요.

▲ 그림 14-14 라우터 적용

 

이제 구현해야 할 기능을 모두 완성했습니다!