A Next.js ügyféloldali navigációt biztosít, amely gyorsabb, mint a teljes oldal újratöltése — csak az új oldal adatait/komponenseit olvassa be és cseréli ki, megőrizve a megosztott elrendezéseket.
;
() {
(
);
}
A <Link> egy <a> elemet jelenít meg, de elfogja a kattintást az ügyféloldali navigációhoz. Döntő fontosságú, hogy előbetölti a csatolt útvonalat, amikor a hivatkozás a nézetablakba kerül, így a navigáció azonnal érződik.
"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
}
}
Használja a useRouter -t, amikor a navigáció logika válaszaként kell megtörténnie (az űrlap beküldése után, bejelentkezés, stb.), nem pedig egy hivatkozásra kattintás.
<Link> az elrendezések betöltése előtt betölti az útvonalakat.Az App Routerben a hookok a next/navigation modulból származnak (useRouter, usePathname, useSearchParams) — nem a régi next/router -ből (amely csak a Pages Router-ből való). Ezek összekeverése egy gyakori hiba.
A <Link> (automatikus előbetöltéssel) és a useRouter az, hogyan építs gyors, SPA-szerű navigációt, amelyről a Next.js ismert.
Azok használata az egyszerű <a href> helyett (amely teljes újratöltést kényszerít) az, ami gyorsan tartja az alkalmazást és megőrzi az elrendezés állapotát.