Tandai Menu Aktif dengan Cara Menggunakan usePathname Next Js di App Router

Ditulis oleh Next.js

Cara menggunakan usePathname Next.js untuk menu aktif adalah memanggil hook tersebut di Client Component, lalu membandingkan nilainya dengan href tiap link. Langkah yang paling sering terlewat adalah menambahkan use client di baris pertama file navigasi, karena page App Router secara default adalah Server Component.

Aturan Wajib usePathname di App Router

Hook ini hanya membaca URL di browser, jadi Next.js membatasi pemakaiannya di Client Component.

  • Gunakan use client di komponen navbar atau sidebar, bukan di layout atau page induk bila tidak perlu.
  • Import dari next/navigation, bukan next/router yang milik Pages Router.
  • Bedakan tiga data ini: pathname untuk path seperti /blog/react, dynamic route untuk parameter seperti /blog/[slug], dan search params untuk query seperti ?page=2.

Langkah Menggunakan usePathname untuk Menu Aktif

Buat komponen navigasi kecil yang terpisah dari Server Component agar hanya bagian menu yang menjadi client.

  1. Tambahkan use client pada komponen navigasi.
  2. Panggil usePathname() dan simpan nilainya ke variabel.
  3. Cocokkan pathname untuk state aktif dan nested route.
  4. Terapkan class aktif pada link yang cocok.
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const links = [
  { href: "/", label: "Beranda" },
  { href: "/blog", label: "Blog" },
  { href: "/tentang", label: "Tentang" },
];

export default function Navbar() {
  const pathname = usePathname();

  return (
    <nav>
      {links.map((link) => {
        const isActive =
          link.href === "/"
            ? pathname === "/"
            : pathname === link.href ||
              pathname.startsWith(`${link.href}/`);
        return (
          <Link
            key={link.href}
            href={link.href}
            aria-current={isActive ? "page" : undefined}
            className={isActive ? "active" : ""}
          >
            {link.label}
          </Link>
        );
      })}
    </nav>
  );
}

Pola startsWith membuat menu /blog tetap aktif saat pengguna membuka /blog/judul-artikel.

BACA JUGA:

Perbandingan API Navigasi yang Sering Tertukar

Fungsi Hasil Catatan
usePathname /blog/react Tanpa query string
useSearchParams page=2 Untuk ?page=2
useParams {slug: react} Untuk rute dinamis

Pakai usePathname saja bila hanya perlu menandai menu aktif, breadcrumb path, atau judul berdasarkan segmen URL.

Kesalahan Umum dan Cara Memperbaiki

  • Hook dipakai di Server Component sehingga muncul error hook hanya untuk Client Component. Pindahkan logika menu ke file terpisah berlabel use client.
  • Import dari next/router. Ganti ke next/navigation karena usePathname App Router hanya tersedia di sana.
  • Menu rute dinamis tidak aktif karena memakai perbandingan sama dengan. Gunakan pencocokan awalan atau cek segmen, misalnya pathname.split.
  • Trailing slash membuat /blog/ tidak sama dengan /blog. Normalisasi dengan menghapus slash akhir sebelum dibandingkan.

FAQ

Apakah usePathname bisa dipakai di Server Component?

Tidak bisa, hook ini khusus Client Component dan butuh direktif use client.

Bagaimana membaca query string dengan usePathname?

Tidak bisa, usePathname mengabaikan query string, gunakan useSearchParams untuk membaca ?page=2.

Kenapa pathname tidak berubah setelah redirect?

Komponen biasanya membaca nilai lama saat navigasi belum selesai, pastikan redirect memakai mekanisme App Router dan komponen membaca ulang hook setelah navigasi.

Artikel Terkait