React Router တွင် အခြေခံလမ်းကြောင်းတစ်ခုဖန်တီးခြင်း

မကြာခဏဆိုသလို ပင်မစာမျက်နှာကို ဦးတည်သော အဓိကလမ်းကြောင်းကို အခြေခံလမ်းကြောင်း (root route) ဟုခေါ်သည်၊ အဘယ့်ကြောင့်ဆိုသော် အခြားလမ်းကြောင်းများသည် ၎င်းအတွင်း ရှုတ်ချခံရမည်ဖြစ်သောကြောင့်ဖြစ်သည်။ ၎င်းကို သီးခြား component တစ်ခုအဖြစ် စိတ်ကူးကြည့်ရန် အလွန်အဆင်ပြေပါသည်။ ထို့ကြောင့် ကျွန်ုပ်တို့၏ application ကို ပြန်ယူကာ src ဖိုလ်ဒါအတွင်း နောက်ထပ်တစ်ခုဖန်တီးပြီး routes ဟုအမည်ပေးပါမည်။ ယခုဤဖိုလ်ဒါအတွင်း root.jsx ဖိုင်ကို ဖန်တီးပြီး သီးခြား React component Root အတွက် ထားရှိပါမည်။ ဖိုင်အတွင်းရှိ ကုဒ်သည် အောက်ပါအတိုင်းဖြစ်လိမ့်မည်:

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

ယခု main.jsx ဖိုင်အတွင်းရှိ ကုဒ်အနည်းငယ်ကို ပြောင်းလဲကြပါစို့၊ အဘယ့်ကြောင့်ဆိုသော် element ၏ တန်ဖိုးအဖြစ် ယခုအခါတွင် ကျွန်ုပ်တို့သည် component Root ကို ပို့ဆောင်ပေးမည်ဖြစ်ပြီး၊ ၎င်း၏အကြောင်းအရာသည် ယခုအခါ သီးခြားဖိုင် root.jsx အတွင်းတွင်ရှိနေသောကြောင့်ဖြစ်သည်:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
  },
]);

main.jsx အတွင်းရှိ ကျွန်ုပ်တို့၏ component ကို import လုပ်သည့် စာကြောင်းကို မမေ့ပါနှင့်:

main.jsximport Root from './routes/root';