[React] React Router Dom - NavLink 컴포넌트

NavLink

• Link가 active 상태이면, 클래스 이름에 active가 추가 된다.
• active 스타일링 or 스크린 리더에 유용하다.
• isActive 불리언 값에 따라 style 객체를 직접 할당하거나, className을 할당하여 조건부 스타일링을 할 수 있다.

활용 방안

• Navbar 또는 토글 메뉴에서 아주 유용하게 사용할 수 있을 것 같다.

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

export default function Header() {
  const activeStyle = {
    color: 'orange',
  };
  const activeClassName = 'active';

  return (
    <div>
      <NavLink
        to='/'
        style={({ isActive }) => (isActive ? activeStyle : undefined)}
      >
        Index
      </NavLink>
      <NavLink
        to='/home'
        className={({ isActive }) => (isActive ? activeClassName : undefined)}
      >
        Home
      </NavLink>
    </div>
  );
}

Reference
React Router - NavLink