[React] NavLink

개요

• Link에 이벤트 발생 시 스타일링 적용하기

MainNavigation.module.css

.list a {
  text-decoration: none;
  color: var(--color-primary-400);
}

.list a:hover,
.list a.active {
  color: var(--color-primary-800);
  text-decoration: underline;
}

MainNavigation.js

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

import classes from './MainNavigation.module.css';

function MainNavigation() {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li>
            <NavLink
              to="/"
              className={({ isActive }) =>
                isActive ? classes.active : undefined
              }
              // style={({ isActive }) => ({
              //   textAlign: isActive ? 'center' : 'left',
              // })}
              end // true
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/products"
              className={({ isActive }) =>
                isActive ? classes.active : undefined
              }
            >
              Products
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default MainNavigation;

NavLink

• 현재 활성된 라우트의 경로가 NavLink의 경로로 시작하는지 확인한다. 해당 경로로 시작하면 isActive = true

end

• 모든 라우트는 ‘/’로 시작하기 때문에 경로를 루트로 설정할 경우 모든 라우트는 항상 true 로 반환된다.
• 루트 라우트만 활성 상태인지 확인하려면 end 프로퍼티를 이용하면 된다.
• 현재 활성된 라우트의 URL의 뒤가 '/'로 끝나야 활성 상태로 간주한다는 의미이다.

참고

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