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

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

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

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

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

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

import Root from './routes/root';

ယခင်သင်ခန်းစာများအတွက် တာဝန်များတွင် သင်ဖန်တီးထားသော application ကို ဖွင့်ပါ။ ဤသင်ခန်းစာတွင် ဖော်ပြထားသည့်အတိုင်း အခြေခံလမ်းကြောင်းအတွက် သီးခြား React component Root ကို သီးခြားဖိုင် root.jsx အတွင်း ဖန်တီးပါ။ သင်၏ main.jsx အတွင်း ပြောင်းလဲမှုများ ပြုလုပ်ပါ။