대부분의 웹 앱에는 UI 상단, 사이드바에 영구 탐색 섹션이 있으며 여러 레벨에 걸쳐 있는 경우가 많습니다. 사용자가 앱에서 활성 탐색 항목이 어디에 있는지 (isActive) 또는 어디로 이동 중인지 (isPending)를 알 수 있도록 활성 탐색 항목의 스타일을 <NavLink> 로 쉽게 지정할 수 있습니다.

<NavLink
  style={({ isActive, isPending }) => {
    return {
      color: isActive ? "red" : "inherit",
    };
  }}
  className={({ isActive, isPending }) => {
    return isActive ? "active" : isPending ? "pending" : "";
  }}
/>

링크 이외의 다른 "활성" 표시에도 useMatch 를 사용할 수 있습니다.

function SomeComp() {
  const match = useMatch("/messages");
  return <li className={Boolean(match) ? "active" : ""} />;
}