NavLink 사용법

<NavLink>

React Router 에서 지원하는 기능 중 하나이다.
navigation menu, tab menu 등을 개발할 때 유용하게 사용할 수 있다.

기존의 <Link> 와 가장 큰 차이점은 클릭 시 다른 페이지로 이동시킬 뿐만 아니라
isActive 속성을 전달받아 현재 active된 요소를 선택하여 style 지정이나 className 지정을 할 수 있다는 점이다.

사용법은 간단하다. <Link> 와 같이 to 속성에 렌딩할 path 명을 전달하고, style 이나 className 을 지정할때는 콜백함수의 인자로 { isActive } 속성을 전달받으면 된다.

import { NavLink } from "react-router-dom";
import links from "../utils/links";

interface IProps {
  toggleSidebar: () => void;
}

interface ILinks {
  id: number;
  text: string;
  path: string;
  icon: JSX.Element;
}

const links: Array<ILinks> = [
  { id: 1, text: "stats", path: "/", icon: <IoBarChartSharp /> },
  { id: 2, text: "all jobs", path: "all-jobs", icon: <MdQueryStats /> },
  { id: 3, text: "add job", path: "add-job", icon: <FaWpforms /> },
  { id: 4, text: "profile", path: "profile", icon: <ImProfile /> },
];

const NavLinks: React.FC<IProps> = ({ toggleSidebar }) => {
  return (
    <div className="nav-links">
      {links.map((link) => {
        const { id, text, path, icon } = link;
        return (
          <NavLink
            to={path}
            className={({ isActive }) =>
              isActive ? "nav-link active" : "nav-link"
            }
            key={id}
            onClick={toggleSidebar}
          >
            <span className="icon">{icon}</span>
            {text}
          </NavLink>
        );
      })}
    </div>
  );
};