reactjsreact-routernext.js

Target Active Link when the route is active in Next.js

How to target the active Link in Next.js like they way we do it in React-Router-4? Meaning, give the active link a class when its route is active?

Solution

  • A simple solution based on the useRouter hook:

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


export const MyNav = () => {

  const router = useRouter();

  return (
    <ul>
      <li className={router.pathname == "/" ? "active" : ""}>
        <Link href="/">home</Link>
      </li>
      <li className={router.pathname == "/about" ? "active" : ""}>
        <Link href="/about">about</Link>
      </li>
    </ul>
  );
};

    You could also use router.asPath instead of router.pathname if you want to include the url query parameters. This can be useful if you want to handle anchor tags such as /#about.