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

next js active nav link

ZNAS answered on June 3, 2020 Popularity 10/10 Helpfulness 4/10

answer next js active nav link

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 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript nav next

Link to this answer
Share Copy Link

Contributed on Jun 27 2022

ZNAS

0 Answers Avg Quality 2/10

Closely Related Answers

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 7/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 03 2020

Pleasant Platypus

0 Answers Avg Quality 2/10

active nav links in next.js

Comment

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 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 10 2021

Sore Scarab

0 Answers Avg Quality 2/10

next js active nav link

Contents

More Related Answers

next js active nav link

Closely Related Answers

next js active link

active nav links in next.js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.