Next.js 라우터에서 Active Link 감지하는 방법

2020년 3월 26일
  • Next.js
  • router
  • useRouter

create-react-app으로 react-router를 사용하다가 next.js에서 router를 사용할 때 react-router의 NavLink activeclass와 같은 기능을 사용하려면 Link 컴포넌트를 수정해야한다.

import Link from "next/link";
import { withRouter } from "next/router";
import { Children } from "react";

const ActiveLink = withRouter(({ router, children, ...props }) => (
  <Link {...props}>
    {React.cloneElement(Children.only(children), {
      className: router.pathname === props.href ? `active` : null
    })}
  </Link>
));

withRouter 사용해서 경로를 받은 다음 Link의 href prop과 비교하는 코드인데, 위와 같이 사용하면 dynamic page의 경우 인식을 못한다. first url segment로 매치하고 싶을때는 아래와 같이 쓰면 된다.

import Link from "next/link";
import { withRouter } from "next/router";
import { Children } from "react";

const ActiveLink = withRouter(({ router, children, ...props }) => (
  <Link {...props}>
    {React.cloneElement(Children.only(children), {
      className:
        `/${router.pathname.split("/")[1]}` === props.href ? `active` : null
    })}
  </Link>
));

useRouter를 사용할경우는 아래와 같이 사용하면 된다.

import Link from "next/link";
import { useRouter } from "next/router";
import { Children } from "react";

const ActiveLink = ({ children, ...props }) => {
    const router = useRouter()
    return (
        <Link {...props}>
            {React.cloneElement(Children.only(children), {
                className: router.pathname === props.href ? `active` : null
            })}
        </Link>
  )
}