Next.js menyediakan navigasi sisi klien yang lebih cepat daripada muat ulang halaman penuh — ia hanya mengambil data/komponen halaman baru dan menukarnya, tetap menjaga tata letak bersama yang dipasang.
;
() {
(
);
}
<Link> merender <a> tetapi mengintersep klik untuk navigasi sisi klien. Sangat penting, ia pra-mengambil rute yang ditautkan ketika tautan memasuki viewport, jadi navigasi terasa instan.
"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router
export default function LoginForm() {
const router = useRouter();
async function onSubmit() {
await login();
router.push("/dashboard"); // navigate after an action
// router.replace("/x") — no history entry
// router.back() — go back
// router.refresh() — re-fetch server data for the current route
}
}
Gunakan useRouter ketika navigasi harus terjadi sebagai respons terhadap logika (setelah pengiriman formulir, login, dll.), bukan klik pada tautan.
<Link> memuat sebelumnya rute sebelum Anda mengklik.Di App Router, hook berasal dari next/navigation (useRouter, usePathname, useSearchParams) — bukan next/router yang lama (yang hanya Pages Router). Mencampurnya adalah kesalahan umum.
<Link> (dengan pra-pengambilan otomatis) dan useRouter adalah cara Anda membangun navigasi yang cepat dan mirip SPA yang Next.js terkenal.
Menggunakannya alih-alih <a href> biasa (yang memaksa muat ulang penuh) adalah apa yang membuat aplikasi tetap gesit dan mempertahankan status tata letak.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma