Next.js Discord

Discord Forum

Error: NextRouter was not mounted.

Answered
Gharial posted this in #help-forum
Open in Discord
Avatar
GharialOP
Hello. I am using the router component. Imported from next/router, inside my NavItem component. I have no idea why this error is popping up.
Answered by Asian black bear
You have to use the hook from next/navigation instead.
View full answer

6 Replies

Avatar
GharialOP
"use client";
import Link from "next/link";
import React from "react";
import classnames from "classnames";
import { PageNameEnum } from "../../../../routerConfig";
import { useRouter } from "next/router";

interface InavItem {
  linkUrl: string;
  pageName: PageNameEnum;
}

function NavItem({ pageName, linkUrl }: InavItem) {
  const router = useRouter();
  const navItemClassNames =
    "block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent";
  const isActiveClassName =
    router.pathname === linkUrl ? "text-blue-700" : "text-white";

  return (
    <>
      <li>
        <Link
          href={linkUrl}
          className={classnames(navItemClassNames, isActiveClassName)}
        >
          {pageName}
        </Link>
      </li>
    </>
  );
}

export default NavItem;
Avatar
Asian black bear
You have to use the hook from next/navigation instead.
Answer
Avatar
GharialOP
Thank you. I think you are right. However I cannot get the hook to give me the current path.
There are only navigation options.
Avatar
Asian black bear
usePathname
Avatar
GharialOP
Thanks. Solved