React Router ရှိ လမ်းကြောင်းများ

လမ်းကြောင်းများ (Routes) သည် React Router တွင် ဆောက်လုပ်ထားသော application ၏ အရေးအကြီးဆုံး အစိတ်အပိုင်းဖြစ်သည်။ ယခင်သင်ခန်းစာမှ ကုဒ်အပိုင်းအစကို ပြန်လည်သုံးသပ်ကြည့်ကြပါစို့။

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

ဒီတော့၊ router ဖန်တီးသည့်အခါ function ထဲသို့ ကျွန်ုပ်တို့ ထည့်သွင်းခဲ့သော path နှင့် element properties များသည် Route object ၏ properties များပင် ဖြစ်သည်။ တကယ်တော့၊ ဤ object သည် ဂုဏ်သတ္တိများစွာ ရှိပြီး၊ ၎င်းတို့ကို တရားဝင် အက်ပ်လီကေးရှင်း လမ်းညွှန်တွင် ရှာဖွေနိုင်သည်။ နောက်ပိုင်းတွင်၊ ၎င်းတို့အနက် အချို့သည် ကျွန်ုပ်တို့အတွက် အသုံးဝင်လာမည်။

interface RouteObject {
	path?: string;
	index?: boolean;
	children?: React.ReactNode;
	caseSensitive?: boolean;
	id?: string;
	loader?: LoaderFunction;
	action?: ActionFunction;
	element?: React.ReactNode | null;
	Component?: React.ComponentType | null;
	errorElement?: React.ReactNode | null;
	ErrorBoundary?: React.ComponentType | null;
	handle?: RouteObject["handle"];
	shouldRevalidate?: ShouldRevalidateFunction;
	lazy?: LazyRouteFunction<RouteObject>;
}

JSX style ကို အခြားနည်းလမ်းဖြင့် သုံးနိုင်ပြီး Route component အတွက် props အဖြစ် properties များကို ရေးသားနိုင်သည်။ ထိုသို့ဆိုလျှင် ကျွန်ုပ်တို့၏ ကုဒ်အပိုင်းအစသည် အောက်ပါအတိုင်း ဖြစ်လာမည်။

const router = createBrowserRouter(
	createRoutesFromElements(
		<Route
			path = '/'
			element = {<div>Hello Router!</div>}
		/>
	)
);

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

import {
	createRoutesFromElements,
	createBrowserRouter,
	RouterProvider,
	Route,
} from 'react-router-dom';

သင်ခန်းစာတွင် ဖော်ပြထားသော style နှစ်မျိုးစလုံး တန်းတူဖြစ်သည်။ နောက်ပိုင်းတွင် ကျွန်ုပ်တို့သည် ပထမနည်းလမ်းကို လိုက်နာသွားမည်။

သင်၏ ယခင်သင်ခန်းစာများတွင် ဖန်တီးခဲ့သော အက်ပ်လီကေးရှင်းကို ယူပါ။ Router ဖန်တီးရန် ကုဒ်အပိုင်းအစကို (အဟောင်းကို ယခုအတွက် comment out လုပ်ထားပါ) သင်ခန်းစာတွင် ဖော်ပြထားသော JSX syntax ကို အခြားနည်းလမ်းဖြင့် အသုံးပြု၍ ပြန်လည်ရေးသားရန် ကြိုးစားကြည့်ပါ။ အက်ပ်လီကေးရှင်း အလုပ်လုပ်ကြောင်း သေချာပါစေ။

ကုဒ်အဟောင်း အားလုံးကို နေရာပြန်ထားပြီး ကုဒ်အသစ်ကို ဖယ်ရှားပါ။ အက်ပ်လီကေးရှင်း အလုပ်လုပ်ကြောင်း သေချာပါစေ။