Link 컴포넌트가 아닌 NavLink로 현재 location의 pathname를 확인하여 해당 pathname과 일치할 경우 커스텀한 css 적용하기 (ex. bold / color 등등)

🍕 샘플 코드

부모 컴포넌트

메뉴 컴포넌트의 상단에서 pathname별 router 설정을 해주고 path와 출력할 이름을 props로 전달해준다.

	// 메뉴 컴포넌트의 부모에서 사용
	<Menu to={"/"} children={"홈"} />
	<Menu to={"/business"} children={"비즈니스"} />
      .....

최상위 컴포넌트에서 path별로 Router 설정 👉 부모 컴포넌트에서 Menu 컴포넌트를 렌더하면서 props전달 👉 Menu 컴포넌트에서 NaviLink 컴포넌트를 렌더 👉 렌더된 NaviLink 컴포넌트에서 현재 path에 따라 isActive일 때 css 적용

메뉴 컴포넌트

부모에서 받은 props : 메뉴 이름, path를 가져와서 사용한다.

import styles from "./Menu.sass";
// Menu.sass에서 .LinkActive 의 css를 가져온다.

interface NaviText {
  to: string;
  children: string;
}

const Menu = ({ to, children }: NaviText) => {
  return (
    <NavLink
      to={to}
      className={({ isActive }) => (isActive ? styles.LinkActive : "")}
    >
      {children}
    </NavLink>
  );
};

export default Menu;

active 시 바꿀 css 설정하기

인라인으로 적용해도 되고 컴포넌트 내부 선언을 해도 되지만 css를 import로 분리하여 스타일을 가져왔다.

// sass
.LinkActive
  font-weight: 600

🎈 적용 결과

각 링크를 클릭하면 .LinkActive에 적용되어있는 font-weight: 600이 적용되는걸 확인할 수 있다.