React Router တွင် Index Route အကြောင်း

ဤသင်ခန်းစာတွင် Index Route များဆိုသည်မှာ အဘယ်နည်းဆိုတာ ကျွန်ုပ်တို့သိရှိသွားကြမည်။

အစပိုင်းတွင် အချက်တစ်ခုကို အာရုံစိုက်ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့သည် အဓိကစာမျက်နှာပေါ်တွင် ရှိနေသည့်အခါ ညာဘက်တွင် ဗလာဖန်သားပြင်တစ်ခုသာမြင်ရပါသည်။ အဘယ်ကြောင့်ဆိုသော် မည်သည့်သားစား route မျှ လိပ်စာ / နှင့်မကိုက်ညီသောကြောင့်ဖြစ်ပြီး ထိုသို့သောအခြေအနေတွင် မည်သည်ကိုပြသရမည်ကို ကျွန်ုပ်တို့ မပြောထားသောကြောင့်ဖြစ်သည်။ ထိုသို့သောအခြေအနေတွင် ဗလာစာမျက်နှာကိုမပြသရန် Index Route ကို အသုံးပြုနိုင်သည် - ၎င်းသည် လမ်းကြောင်းတစ်ခု မပါရှိသော သားစား route တစ်ခုဖြစ်ပြီး ၎င်း၏ element ကို မိဘ Outlet အတွင်း မည်သည့်သားစား route မှ လိပ်စာနှင့် မကိုက်ညီသည့်အခါတွင် ပြသသည်။ ထိုသို့သော route များဖြင့် သတင်းအချက်အလက်၊ စာရင်းဇယား သို့မဟုတ် အခြားအလားတူအရာများကို ထည့်သွင်းနိုင်သည်။ ပုံမှန် route များနည်းတူ ၎င်းတို့ကို ဒေတာများတင်သွင်းရန် အသုံးပြုနိုင်သည်။

ယခု routes ဖိုလ်ဒါအတွင်း index.jsx ဖိုင်တစ်ခုကိုဖန်တီးပြီး ၎င်းအတွင်း Index component ကိုရေးကြမည်:

routes/index.jsxexport default function Index() {
  return (
    <div>
      <p>Hi, React Router!</p>
      <p>This is an application for my products :)</p>
    </div>
  );
}

ယခု main.jsx သို့သွားပြီး ကျွန်ုပ်တို့၏ component Index ကို import လုပ်ကြမည်:

main.jsximport Index from './routes/index';

ပြီးလျှင် children array အတွင်းရှိ ပထမဆုံး element အဖြစ် object တစ်ခုထည့်မည်၊ ၎င်းတွင် index property ကို true အဖြစ်သတ်မှတ်ပြီး ပြသရန်အတွက် element အဖြစ် ကျွန်ုပ်တို့၏ component Index ကိုထားမည်:

main.jsx{ index: true, element: <Index /> },