React Route dom v6 하위 경로 이동 시 에도 인덱스 NavLink 활성화

1. 원하는 작동 방식

MemberDetail페이지 진입 시 MyPost컴포넌트가 Index로 렌더링 되고 각각의 NavLink가 URL에 따라 활성화

<Route path="memberDetail" element={<MemberDetail />}>
	<Route index element={<MyPost />} />
	<Route path="myComment" element={<MyComment />} />
	<Route path="postReaction" element={<PostReaction />} />
	<Route path="memberEdit" element={<MemberEdit />} />
</Route>

<NavLink to="">작성 글</NavLink>
<NavLink to="myComment">작성 댓글</NavLink>
<NavLink to="postReaction">내 글 반응</NavLink>
<NavLink to="memberEdit">내 정보 수정</NavLink>

하지만 위와 같은 코드는 MemberDetail 진입 시에는 작동을 했지만 하위 경로로 이동 시 인덱스와 선택된 하위 경로 모두 활성화되는 결과를 가져왔다.

2. 해결 방법 NavLink end

NavLink의 매개변수 중 하나인 “end”를 사용하여 해결하였다.

<NavLink to="" end>작성 글</NavLink>
<NavLink to="myComment">작성 댓글</NavLink>
<NavLink to="postReaction">내 글 반응</NavLink>
<NavLink to="memberEdit">내 정보 수정</NavLink>

NavLink to경로의 마지막이 일치하면 active , pending 상태를 활성화 시킨다.

링크	URL	활성
<NavLink to="/tasks" />	/tasks	진실
<NavLink to="/tasks" />	/tasks/123	진실
<NavLink to="/tasks" end />	/tasks	진실
<NavLink to="/tasks" end />	/tasks/123	거짓

…/memberDetail/postReaction