React Router တွင် ခွဲခြားသတ်မှတ်ထားသော လမ်းကြောင်းများ

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ခွဲခြားသတ်မှတ်ထားသော လမ်းကြောင်းများ နှင့် မိတ်ဆက်ပါမည်။ ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့လုပ်ခဲ့သော အပလီကေးရှင်းကို စတင်ပါ။ လင့်ခ်များကို နှိပ်ခြင်းဖြင့်၊ ကျွန်ုပ်တို့သည် ထုတ်ကုန်တစ်ခုစီအတွက် သီးသန့်စာမျက်နှာသို့ ရောက်ရှိသွားပါသည်။ ထိုသို့ဖြစ်ခြင်းသည် မအဆင်ပြေဟု ယူဆပါက၊ ထုတ်ကုန်များစာရင်းနှင့် ထုတ်ကုန်စာမျက်နှာတို့ကို ဘေးချင်းယှဉ်တွဲ၍၊ တစ်ချိန်တည်းတွင် ပိုမိုမြင်သာစေရန် ပြသလိုပါသည်။ ထိုသို့လုပ်ဆောင်ကြပါစို့။

ဤအတွက် main.jsx ဖိုင်ကို ဖွင့်ပြီး ထုတ်ကုန်စာမျက်နှာအတွက် ကျွန်ုပ်တို့၏လမ်းကြောင်းကို အမြစ်လမ်းကြောင်း၏ ကလေးလမ်းကြောင်းအဖြစ် ပြုလုပ်ပါမည်။ တစ်နည်းအားဖြင့် ၎င်းကို အမြစ်လမ်းကြောင်းအတွင်း "ခွဲခြားသတ်မှတ်" ပါမည်။ ဤသို့လုပ်ဆောင်ရန် လမ်းကြောင်းအရာဝတ္ထု၏ နောက်ထပ် ဂုဏ်သတ္တိတစ်ခုဖြစ်သော children ကို အသုံးပြုပါမည်။

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },

]);

လင့်ခ်များကို ထပ်မံနှိပ်ကြည့်ပါက၊ ထုတ်ကုန်စာရင်း၏ ညာဘက်တွင် ကျွန်ုပ်တို့သည် ဘာမှမမြင်ရပါ။ အကြောင်းမှာ ကျွန်ုပ်တို့၏ကလေးလမ်းကြောင်းများကို အဘယ်နေရာတွင် ပြသလိုသည်ကို အမြစ်လမ်းကြောင်းအား မပြောပြခဲ့သောကြောင့်ဖြစ်သည်။

မိဘလမ်းကြောင်းတွင် ကလေးလမ်းကြောင်းများ၏ အစိတ်အပိုင်းများကို ထုတ်လုပ်ရန်အတွက် Outlet component သည် အကူအညီပေးပါလိမ့်မည်။ ၎င်းကို စာကြည့်တိုက်မှ အမြစ်လမ်းကြောင်းအတွက် ဖိုင်သို့ တင်သွင်းကြပါစို့။

routes/root.jsximport { Outlet } from 'react-router-dom';

ထို့နောက် ၎င်းကို #product div အတွင်းသို့ ထည့်သွင်းပြီး အမြစ်လမ်းကြောင်းအတွက် လေယာဉ်ပုံစံတွင် nav tag ပိတ်ပြီးနောက် အဆုံးတွင် ထည့်သွင်းပါမည်။ ထို့အပြင် တည်ဆောက်မှုအားလုံးကို နောက်ထပ် #main div တစ်ခုဖြင့် ထပ်မံထည့်သွင်းပါမည်။

routes/root.jsxreturn (
  <div id="main">
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
    <div id="product">
      <Outlet />
    </div>
  </div>
);

လင့်ခ်များကို နှိပ်ခြင်းဖြင့်၊ ယခုအခါ ကျွန်ုပ်တို့သည် ထုတ်ကုန်များစာရင်းနှင့် ထုတ်ကုန်စာမျက်နှာကို မြင်တွေ့ရပါသည်။

ယခု ကျွန်ုပ်တို့၏ index.css တွင် စတိုင်များ အနည်းငယ် ထည့်သွင်းကြပါစို့။

index.cssh1, h2 {
  margin: 0;
}

div#main {
  display: flex;
  margin: 20px;
}

div#product {
  margin-left: 40px;
}