next js active link code example
Example 1: next js active link
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>
);
};
Example 2: next link
import Link from 'next/link'
function Home() {
return (
<ul>
<li>
<Link href="/">
<a>Home</a>
</Link>
</li>
<li>
<Link href="/about">
<a>About Us</a>
</Link>
</li>
<li>
<Link href="/blog/hello-world">
<a>Blog Post</a>
</Link>
</li>
</ul>
)
}
export default Home
Example 3: nextjs active link
import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';
const NavLink = ({ href, children }) => {
const router = useRouter();
let className = children.props.className || '';
if (router.pathname === href) {
className = `${className} selected`;
}
return <Link href={href}>{React.cloneElement(children, { className })}</Link>
}
export default NavLink;