NextJS တွင် Parallel Routing

NextJS တွင် ဝဘ်ဆိုဒ်၏ အစိတ်အပိုင်းတစ်ခုသည် တောင်းဆိုသော URL အပေါ် မူတည်၍ မတူညီသော အကြောင်းအရာများကို ပြသရန် ပြုလုပ်နိုင်ပါသည်။ �ကဲ့သို့သော အရာကို parallel routing ဟုခေါ်ပါသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါ ဝဘ်ဆိုဒ် layout တစ်ခု ရှိသည်ဟု ဆိုကြပါစို့။

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

header တွင် dynamic အချက်အလက်များ ပြသစေလိုသည်ဟု ဆိုကြပါစို့။ URL /users ဖြင့် အသုံးပြုသူများ (users) ပါသော component ကို ပြသပြီး၊ URL /posts ဖြင့် ပို့စ်များ (posts) ပါသော component ကို ပြသစေလိုပါသည်။

ဤကဲ့သို့ parallel routing အတွက် အထူး folder တစ်ခု ဖန်တီးရန် လိုအပ်ပြီး၊ ၎င်း၏ အမည်ကို @ သင်္ကေတဖြင့် စတင်ရပါမည်။ ဥပမာအနေဖြင့် ကျွန်ုပ်တို့၏ folder ကို @info ဟု အမည်ပေးပါမည်။

ဤ folder အတွင်း component နှစ်ခုကို ထည့်သွင်းပါမည်။ ပထမတစ်ခုမှာ /users/ folder တွင် အသုံးပြုသူများကို ပြသရန်အတွက်ဖြစ်ပြီး၊ ဒုတိယတစ်ခုမှာ /posts/ folder တွင် ပို့စ်များကို ပြသရန်အတွက် ဖြစ်ပါသည်။ ကျွန်ုပ်တို့၏ ဖိုင်ဖွဲ့စည်းပုံမှာ အောက်ပါအတိုင်း ဖြစ်လာပါမည်။

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

ယခု ဝဘ်ဆိုဒ် layout အတွင်း အထူးထည့်သွင်းမှု command တစ်ခုကို ရေးသားရန် လိုအပ်ပါသည်။ ဤအတွက် အထူး dynamic slot တစ်ခုကို အသုံးပြုရပါမည်။

၎င်းသည် မည်သည့်အရာဖြစ်သည်ကို နားလည်ရန်၊ ပထမဦးစွာ ကျွန်ုပ်တို့၏ ဝဘ်ဆိုဒ် layout function ၏ parameter ကို ကြည့်ရှုပါ။

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

Parameter အဖြစ် object တစ်ခု ပေးပို့ခြင်းခံရပြီး ၎င်းမှ ဝဘ်ဆိုဒ်၏ content ကို children variable အတွင်းသို့ ထုတ်ယူကြောင်း သတိပြုပါ။

ဤ object အတွင်းတွင် အခြားသော key များ ပါဝင်နိုင်ပါသည်။ ၎င်းတို့သည် ကျွန်ုပ်တို့ @ ဖြင့် စတင်အမည်ပေးထားသော folder များနှင့် ကိုက်ညီပါသည်။

ကျွန်ုပ်တို့၏ ဥပမာတွင် @info folder တစ်ခု ရှိပါသည်။ ဆိုလိုသည်မှာ info variable တစ်ခုကို ရရှိမည်ဖြစ်ပြီး၊ URL အပေါ်မူတည်၍ component များ - အသုံးပြုသူများ (users) သို့မဟုတ် ပို့စ်များ (posts) အနက်မှ တစ်ခု၏ စာသားများ ပါဝင်မည်ဖြစ်သည်။ ဤ variable ကို ရယူကြပါစို့။

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

ယခု layout ၏ markup အတွင်း၌ info variable ကို ပြသနိုင်ပါသည်။ ဤနေရာတွင် URL အပေါ် မူတည်၍ ကျွန်ုပ်တို့၏ component များအနက်မှ တစ်ခု၏ စာသားများ ထည့်သွင်းသွားမည်ဖြစ်သည်။

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

ညာဘက် sidebar အတွက် dynamic slot တစ်ခု ဖန်တီးပါ။

ဘယ်ဘက် sidebar အတွက် dynamic slot တစ်ခု ဖန်တီးပါ။