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

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

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

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

jsxinterface 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 များကို ရေးသားနိုင်သည်။ ထိုသို့ဆိုလျှင် ကျွန်ုပ်တို့၏ ကုဒ်အပိုင်းအစသည် အောက်ပါအတိုင်း ဖြစ်လာမည်။

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

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

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

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