import { useRouter } from 'next/router';
const Navbar2 = () => {
const router = useRouter();
return (
<nav className={`fixed top-0 w-full px-10 bg-white p-4 transition-all duration-500 ${isVisible ? 'top-0' : 'top-[-160px]'}`}>
<div className="flex items-center justify-between">
{/* Brand Logo */}
<div className="w-[40%]">
<Image src={logo} alt="Brand Logo" className="w-20" />
</div>
{/* menu item */}
<div className="flex-1">
{/* main menu */}
<ul className="flex items-center justify-between mt-10">
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>Home</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>About us</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>Admission</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>Safeguarding</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>School life</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>Sixth Form</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>News</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>Alumni</Link></li>
<li><Link href="/" className={router.pathname === '/' ? "text-[#7B003B]" : ''}>Contact us</Link></li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar2;
This code snippet is designed to display the active nav link, but I encountered an error when attempting to use:
import { useRouter } from 'next/router';The error I received was: Unhandled Runtime Error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
I expected this code to highlight the active link in my navigation menu.