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

fixit_fiona

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?

Originally asked by Ruby on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

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 .

Full answer by Rotareti: https://stackoverflow.stackexchange.com/a/59410881 (CC BY-SA 4.0).

Need it done for your business? UphillTech.