NavLink 중첩 경로 isActive 문제!

문제 상황!
네비게이션에서 누른 svg만 isActive 되면서 색을 변경하고 싶었는데 /home의 하위 경로인 /home/chatHome, /home/community, /home/mypage에 접근하면 다 색은 잘 바뀌는데 /home까지! 계속 활성화 상태로 유지되었다.

왠지 다 /home 이 기본으로 깔려있어서 이게 계속 활성화되는 것 같았다.

원인 분석!
NavLink의 isActive 함수는 현재 경로와 to 속성으로 지정한 경로가 일치하거나 하위 경로인 경우에 true를 반환함. 따라서 /home 경로가 활성화되면 그 하위 경로들도 모두 활성화됨.

역시! 그래서 딱딱 끊어서 하고 싶어 찾아보니 end 속성이 있었다. 그 경로와 정확히 일치할 때만 활성화 시켜주는 것.

그래서 /home 에 end를 붙여주면 해결! 다른 하위 경로에는 붙여줄 필요없다.