사이드바에 레코드가 산더미처럼 쌓여 있다.

하지만 어떤 레코드를 보고 있는지 표시가 없어서 명확하지가 않다.

이럴 때 NavLink 를 쓸 수 있다.

Use a "<NavLink>" in the sidebar

// 📄src/routes/root.jsx

import {
  Outlet,
  NavLink,
  useLoaderData,
  Form,
  redirect,
} from "react-router-dom";

export default function Root() {
  return (
    <>
      <div id="sidebar">
        {/* other code */}

        <nav>
          {contacts.length ? (
            <ul>
              {contacts.map((contact) => (
                <li key={contact.id}>
                  <NavLink
                    to={`contacts/${contact.id}`}
                    className={({ isActive, isPending }) =>
                      isActive
                        ? "active"
                        : isPending
                        ? "pending"
                        : ""
                    }
                  >
                    {/* other code */}
                  </NavLink>
                </li>
              ))}
            </ul>
          ) : (
            <p>{/* other code */}</p>
          )}
        </nav>
      </div>
    </>
  );
}

className 에 함수가 전달되는 모습을 주목하자.

사용자가 <NavLink> 와 동일한 URL에 있으면 isActive 가 true이다.

이제 막 해당 URL이 활성화되려는 찰나 (아직 데이터는 로딩중) 이 때는 isPending 이 true가 된다.

이 기능은 유저가 어디에 위치해 있는지 보다 쉽게 알려줄 뿐만 아니라, 클릭한 뒤에 아직 데이터가 로딩중이더라도 isPending 으로 인해 즉각적인 피드백을 제공해준다.

출처 : 리액트 라우터 공식 홈페이지➡️