Hook-ul useRouter() din next/navigation – Navigare programatică în Next.js

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

const router = useRouter();
router.push('/dashboard');
router.refresh();

Ce face Hook-ul useRouter() din next/navigation - Navigare programatică

Hook-ul useRouter() oferă acces programatic la mecanismul de rutare.

Metoda router.push('/cale') navighează la pagina indicată, adăugând intrarea în istoricul browserului.

Metoda router.replace('/cale') redirecționează fără a păstra pagina veche în istoric (util după logout).

Metoda router.refresh() re-solicită datele proaspete de pe server pentru ruta curentă fără a pierde starea componentelor de client.

Exemple

Exemplul 1: Redirecționarea utilizatorului după finalizarea plății

Navighează programatic la pagina de succes după confirmare.

'use client';

import { useRouter } from 'next/navigation';

export default function FormularPlata() {
  const router = useRouter();

  const finalizeaza = async () => {
    await proceseazaTranzactie();
    router.push('/comanda-plasata');
  };

  return <button onClick={finalizeaza}>Plătește acum</button>;
}

Ieșire în terminal

Utilizatorul este redirecționat automat către /comanda-plasata.

Greșeli frecvente

• Importul useRouter din ‘next/router’ în loc de ‘next/navigation’; în App Router importul din ‘next/router’ va arunca eroarea ‘NextRouter was not mounted’.

Comenzi înrudite

• Hook-ul usePathname() - Obținerea căii URL curente: Returnează șirul căii URL curente din bara de adrese a browserului.
• 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.