Hook-ul usePathname() – Obținerea căii URL curente în Next.js

'use client';
import { usePathname } from 'next/navigation';

const pathname = usePathname(); // ex: '/articole/nextjs'

Ce face Hook-ul usePathname() - Obținerea căii URL curente

Hook-ul usePathname() este utilizat frecvent în meniuri de navigare pentru a determina care link este activ în momentul curent și a-i aplica o clasă CSS de evidențiere (active link).

Poate fi apelat exclusiv în componente de client (`’use client’`).

Se actualizează automat la fiecare tranziție de pagină.

Exemple

Exemplul 1: Evidențierea linkului activ în meniul de navigare

Aplică clasa font-bold și text-blue-600 dacă linkul se potrivește cu pagina curentă.

'use client';

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

export default function NavItem({ href, text }: { href: string; text: string }) {
  const pathname = usePathname();
  const esteActiv = pathname === href;

  return (
    <Link
      href={href}
      className={esteActiv ? 'font-bold text-blue-600' : 'text-gray-600 hover:text-black'}
    >
      {text}
    </Link>
  );
}

Ieșire în terminal

Linkul paginii pe care te afli este colorat diferit automat.

Greșeli frecvente

• Încercarea de a citi query string-ul (?pagina=2) prin usePathname; usePathname returnează doar calea, pentru query string se folosește useSearchParams.

Comenzi înrudite

• Hook-ul useSearchParams() - Citirea parametrilor query din URL: Oferă acces de doar-citire la parametrii query string din URL (ex: ?cautare=nextjs&sort=nou).
• Componenta <Link> - Navigare rapidă pe client cu Prefetching automat: Înlocuitorul optimizat al tag-ului <a> care realizează tranziții instantanee fără reîncărcarea întregii pagini.
• Hook-ul useRouter() din next/navigation - Navigare programatică: Permite declanșarea tranzițiilor de navigare din interiorul funcțiilor și componentelor de client.