Next.js क्लाइंट-साइड नेविगेशन प्रदान करता है जो पूर्ण पेज रीलोड से तेज़ है — यह केवल नए पेज का डेटा/घटक लाता है और उन्हें स्वैप करता है, साझा लेआउट को माउंट रखता है।
Link घटक (घोषणात्मक)
tsx
;
() {
(
);
}
<Link> एक <a> रेंडर करता है लेकिन क्लाइंट-साइड नेविगेशन के लिए क्लिक को इंटरसेप्ट करता है। महत्वपूर्ण रूप से, जब लिंक व्यूपोर्ट में आता है तो यह लिंक किए गए रूट को पूर्वलोड करता है, इसलिए नेविगेशन तुरंत महसूस होता है।
"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
}
}
useRouter का उपयोग करें जब नेविगेशन लॉजिक (फॉर्म सबमिट के बाद, लॉगिन, आदि) के जवाब में होना चाहिए, न कि किसी लिंक पर क्लिक करके।
<Link> आपके क्लिक करने से पहले रूट्स को प्रीलोड करता है।App Router में, हुक next/navigation (useRouter, usePathname, useSearchParams) से आते हैं — पुराने next/router से नहीं (जो केवल Pages Router है)। उन्हें मिलाना एक सामान्य त्रुटि है।
<Link> (स्वचालित पूर्वलोडिंग के साथ) और useRouter वह हैं जिससे आप तेज़, SPA-जैसी नेविगेशन बनाते हैं जिसके लिए Next.js प्रसिद्ध है।
उन्हें सादे <a href> (जो पूर्ण रीलोड को बाध्य करता है) के बजाय उपयोग करना ही वह है जो ऐप को तेज़ रखता है और लेआउट स्थिति को संरक्षित करता है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें