[React-Router] Link와 NavLink의 차이점

Link와 NavLink의 차이점

React Router에서 Link와 NavLink는 둘 다 특정 경로로 이동할 수 있도록 도와주는 컴포넌트입니다. 하지만 두 컴포넌트에는 중요한 차이점이 있습니다:

Link:

• 단순히 사용자를 다른 경로로 이동시키는 링크를 생성합니다.

• 활성화 여부와 상관없이 항상 동일한 스타일을 가집니다.

  import { Link } from "react-router-dom";
  
  <Link to="/about">About</Link>

NavLink:

• 기본적으로 Link와 같은 기능을 수행하지만, 현재 경로가 링크의 대상 경로와 일치하면 특별한 클래스나 스타일을 적용할 수 있습니다.
• 예를 들어, 사용자가 현재 활성화된 링크를 구분할 수 있도록 "active" 클래스를 적용할 수 있습니다.

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

    <NavLink 
      to="/about" 
      className={({ isActive }) => isActive ? "active" : ""}
    >
      About
    </NavLink>

end 속성:

NavLink 컴포넌트에서 end 속성은 경로의 일부분이 아닌 전체 경로와 정확히 일치할 때만 "active" 클래스를 적용하도록 합니다.

	<NavLink 
  to="/" 
  className={({ isActive }) => isActive ? "active" : ""}
  end
>
  Home
</NavLink>

이제 Home 링크는 오직 정확히 / 경로에 있을 때만 "active" 클래스를 받게 됩니다.