NextJS တွင် Parallel Routing

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

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

app/layout.jsxexport 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 ကို ကြည့်ရှုပါ။

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

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

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

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

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

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

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