React Router에서 활성 링크 강조하기

우리 애플리케이션에 여러 제품을 추가하고 각 제품을 보고 있다고 가정해 봅시다. 현재 어떤 제품의 페이지에 있는지 어떻게 알 수 있을까요? 목록에서 해당 제품을 예를 들어 굵은 글씨와 갈색으로 강조하고, 링크가 아직 로딩 중이면 회색으로 표시해 보겠습니다.

먼저 메인 페이지로 이동하여 목록에 제품을 4개 추가하고 각각에 데이터를 입력하세요. 원하는 이름을 지어주세요.

활성 링크 강조에는 NavLink 컴포넌트가 도움이 됩니다. 이것은 데이터 상태를 인식하는 Link 컴포넌트의 한 종류입니다. 일반적으로 내비게이션 메뉴를 만들 때 사용됩니다.

root.jsx를 열고 NavLink를 임포트합시다 (Link 임포트를 제거하는 것을 잊지 마세요, 더 이상 사용하지 않으므로 React가 불평할 수 있습니다):

import { NavLink } from 'react-router-dom';

그런 다음 레이아웃에서 Link 컴포넌트를 NavLink로 교체합니다:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

그리고 여기에 className prop을 추가하고 조건부 로직을 사용합시다. 페이지가 로드되면 링크는 활성 상태가 되고, 로딩 중이면 로딩 상태가 되며, 아무 일도 일어나지 않으면 기존 상태를 유지합니다. 이에 따라 링크의 클래스가 변경됩니다:

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

이제 css 파일에 active 및 loading 클래스에 대한 스타일을 추가하기만 하면 됩니다:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

완료! 이제 목록의 제품들을 클릭해 보세요.

이전 강의 과제에서 생성한 애플리케이션을 가져오세요. 강의 자료를 활용하여 학생 목록에 대해 활성 링크 강조를 구현하여 사용자가 현재 어떤 학생의 데이터를 보고 있는지 명확히 알 수 있게 하세요.