더북(TheBook)

16.4.2 NavLink 컴포넌트

 

NavLink 컴포넌트는 Link 컴포넌트와 비슷하지만, 추가 기능이 있습니다. 현재 주소와 해당 컴포넌트의 목적지 주소가 일치한다면 특정 스타일 또는 클래스를 지정할 수 있습니다.

기존 Menu 컴포넌트의 코드를 다음과 같이 수정해 보세요.

import React from ‘react’;
import { NavLink } from ‘react-router-dom’;
 
const Menu = () => {
  const activeStyle = {
    color: ‘green’,
    fontSize: ‘2rem’
  };
 
  return (
    <div>
      <ul>
        <li><NavLink exact to=”/” activeStyle={activeStyle}>홈</NavLink></li>
        <li><NavLink exact to=”/about” activeStyle={activeStyle}>소개</NavLink></li>
        <li><NavLink to=”/about/react” activeStyle={activeStyle}>React 소개</NavLink></li>
      </ul>
    </div>
  );
};
 
export default Menu;
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.