[React] Link / NavLink

✅ Link

• react router를 사용하는 프로젝트에서는 a 태그를 바로 사용하면 안됨
  => a 태그로 페이지 이동 시 브라우저에서 페이지를 새로 불러오기 때문
• Link 컴포넌트도 a 태그를 사용하긴 하지만,
  페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장\
• 이동을 위한 태그이기때문에 to='route경로' 속성이 필수!!

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

...

<Link to = '/'> Home </Link>
<Link to = '/detail'> Detail </Link>

✅ NavLink

• 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트
• 컴포넌트의 style과 className은 {isActive : boolean}을 파라미터로 전달받는 함수 타입의 값을 전달

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

...

const Navbar = () => {
	const activeStyle = {
    	color : 'blue',
        fontSize : 25,
    }
    
    ...
    
    return (
    	...
        
        <NavLink to='/about' style = { ({isActive}) => (isActive ? activeStyle : undefined ) }>
        	About
        </NavLink>
        
        ...
    )
}