19.3 리액트 라우터가 있는 SPA 다중 페이지 구축하기: NavLink 사용하기(feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

NavLink

• NavLink는 기존의 Link 컴포넌트에서 css기능을 추가할 수 있는 Link 라고 볼 수 있다.

NavLink 사용하기

Link를 NavLink 로 대체하여 사용하면 된다.

CSS 추가는 activeClassName prop으로 사용할 수있다.

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

import classes from "./MainHeader.module.css";

const MainHeader = () => {
  return (
    <header className={classes.header}>
      <ul>
        <li>
          <NavLink activeClassName={classes.active} to="/welcome">
            Welcome
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName={classes.active} to="/products">
            Products
          </NavLink>
        </li>
      </ul>
    </header>
  );
};

export default MainHeader;

module.css 를 확인해보자.

NavLink를 사용할때 선택자는 NavLink가 아닌 a태그로 선택자를 사용해주면 된다.

.header a:hover,
.header a:active,
.header a.active {
  color: #95bcf0;
  padding-bottom: 0.25rem;
  border-bottom: 4px solid #95bcf0;
}