NextJS में समानांतर रूटिंग

NextJS में यह संभव है कि साइट का एक हिस्सा विभिन्न सामग्री दिखाए यूआरएल के अनुसार। इसे समानांतर रूटिंग कहा जाता है।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास साइट का निम्नलिखित लेआउट है:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<header>
					header
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

मान लीजिए कि हम चाहते हैं कि हेडर में डायनामिक जानकारी दिखाई दे। मान लीजिए कि यूआरएल /users पर उपयोगकर्ताओं वाला कंपोनेंट दिखाई दे, और यूआरएल /posts पर पोस्ट वाला कंपोनेंट दिखाई दे।

ऐसी समानांतर रूटिंग के लिए एक विशेष फोल्डर बनाना होगा, जिसके नाम की शुरुआत @ चिन्ह से हो। उदाहरण के लिए हम अपना फोल्डर @info नाम देंगे।

इस फोल्डर में हम दो कंपोनेंट रखेंगे। पहला उपयोगकर्ता दिखाने के लिए /users/ फोल्डर में, और दूसरा पोस्ट दिखाने के लिए /posts/ फोल्डर में। हमारी फाइल संरचना इस प्रकार होगी:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

अब हमें साइट के लेआउट में विशेष कमांड लिखनी है सम्मिलित करने के लिए। इसके लिए विशेष डायनामिक स्लॉट का उपयोग करना होगा।

यह समझने के लिए, पहले हमारे साइट लेआउट फंक्शन के पैरामीटर को देखें:

export default function RootLayout({children}) {
	return (
		
	);
}

ध्यान दें कि पैरामीटर के रूप में हमें एक ऑब्जेक्ट पास किया जाता है, जिससे हम साइट की सामग्री को children वेरिएबल में निकालते हैं।

इस ऑब्जेक्ट में अन्य की भी हो सकते हैं। वे उन फोल्डरों के अनुरूप होते हैं, जिनके नाम @ से शुरू हुए हैं।

हमारे मामले में हमारे पास @info फोल्डर है, जिसका मतलब है कि हमारे पास info वेरिएबल उपलब्ध होगी, जो यूआरएल के आधार पर हमारे कंपोनेंट में से एक - उपयोगकर्ता या पोस्ट की सामग्री रखेगी। इस वेरिएबल को प्राप्त करें:

export default function RootLayout({children, info}) {
	return (
		
	);
}

अब लेआउट के मार्कअप के अंदर हम info वेरिएबल को प्रदर्शित कर सकते हैं। यूआरएल के आधार पर इस स्थान पर हमारे कंपोनेंट में से एक की सामग्री सम्मिलित की जाएगी:

export default function RootLayout({children, info}) {
	return (
		<html lang="en">
			<body>
				<header>
					<div>
						{info}
					</div>
				</header>
				<main>
					{children}
				</main>
				<footer>
					footer
				</footer>
			</body>
		</html>
	);
}

दाएं साइडबार के लिए एक डायनामिक स्लॉट बनाएं।

बाएं साइडबार के लिए एक डायनामिक स्लॉट बनाएं।