React router의 Link / NavLink

[1] Link

• React Router의 네비게이션 기능을 하는 기본적인 라우트 컴포넌트
• html의 <a> 태그와 기능적으로 거의 동일
  • <a>와의 차이점
    • a와 다르게 상태관리에 용이하며, 초기 렌더링 성능에 영향을 주지 않는다.
    • 외부 링크 연결 시 a를 사용하고, 앱 내 내부링크 사용 시 Link / NavLink 사용

import { Link } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/">Go to Home</Link>
    </div>
  );
}

[2] NavLink

• Navigation의 스타일이나 클래스에 식별을 하는 기능을 제공
  • activeClassName 또는 activeStyle 프로퍼티를 통해 현재 활성화된 링크의 스타일을 지정

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

function Header() {
  return (
    <header>
      <nav>
        <NavLink to="/" exact activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/aboutus" activeClassName="active">
          About us
        </NavLink>
      </nav>
    </header>
  );
}