[React] Link/NavLink

📌 Link

리액트 라우터에서 페이지 이동할 때는 Link 컴포넌트를 사용하면 내가 이동하고자 하는 경로(URL)로 이동

<Link to="/about">About</Link>

📌 NavLink

NavLink 는 Link의 특별한 버전
현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있음.
스타일 외에도 추가 기능으로 선택된 NavLink의 경우 aria-current="page" 로 지정되어, 접근성에 도움이 됨.

리액트 웹의 현재 URL과 to가 가리키는 링크가 일치할 때, activeStyle과 activeClassName이 활성화 되고 일치하지 않으면 비활성화

<NavLink to="/about">About</NavLink>

activeStyle

const style = {
  fontWeight:'900',
  color:'red',
}
export default function App() {
  return (
    <NavLink to="/" activeStyle={style}>홈</NavLink>
  );
}

activeClassName

const Li = styled.li({
  width: '30%',
  margin: '0 auto',
  '& a': {
    '&.active': {
      borderRadius: '2em',
      backgroundColor: 'pink',
    },
  },
});
export default function App() {
  return (
    <NavLink to="/" activeClassName="active">홈</NavLink>
  );
}

참고 : https://velog.io/@seong-dodo/React-Link와-NavLink