Breaking News: Grepper is joining You.com. Read the official announcement!

next js active link

Pleasant Platypus answered on June 3, 2020 Popularity 10/10 Helpfulness 8/10

answer next js active link

next js active link

Comments(1)

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>
  );
};

Popularity 10/10 Helpfulness 8/10 Language javascript

Source: stackoverflow.com

Tags: javascript next

Link to this answer
Share Copy Link

Contributed on Jun 03 2020

Pleasant Platypus

0 Answers Avg Quality 2/10

Closely Related Answers

next js active nav link

Comment

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


export const MyNav = () => {

  const router = useRouter();

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

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link