React Router ရှိ လမ်းကြောင်းအတွက် ဒေတာ ဖတ်တဲ့သူ (Data Loader)

ပြီးခဲ့တဲ့သင်ခန်းစာမှာ ကုန်ပစ္စည်းဒေတာတွေကို သိုလှောင်ရာနေရာ (store) ကနေ ထုတ်ယူခဲ့ပါတယ်။ အခု ဒီ ဒေတာတွေကို လမ်းကြောင်းအစိတ်အပိုင်း (route element) ထဲ ထည့်ဖို့လိုပါတယ်။ ဒါအတွက် ဒေတာဖတ်တဲ့သူ (loader) လို့ခေါ်တဲ့ ဖန်ရှင်ကို အသုံးပြုပါတယ်။ အခု ကျွန်တော်တို့ ဒါကို ဖန်တီးကြမယ်။

root.jsx ဖိုင်ကို ဖွင့်ပါ၊ ဒီမှာ getProducts ကို forStorage.js ကနေ import လုပ်တဲ့စာကြောင်း ထည့်ပါမယ် :

routes/root.jsximport { getProducts } from '../forStorage'

Import စာကြောင်းတွေရဲ့ ချက်ချင်းနောက်မှာနဲ့ Root ဖန်ရှင် Root မစခင် loader လို့ခေါ်တဲ့ ဖန်ရှင်ကိုရေးပါမယ်၊ ဒီဖန်ရှင်က getProducts ကနေတဆင့် သိုလှောင်ရာနေရာ (store) ထဲက ကုန်ပစ္စည်းဒေတာတွေကို ပြန်ပေးပါလိမ့်မယ်။ အနှစ်ချုပ်အားဖြင့် ဒီလိုဖန်ရှင်တွေကို သီးခြားဖိုင်တစ်ခုမှာရေးသင့်ပေမယ့် ကျွန်တော်တို့က အနည်းငယ်ပျင်းရိပါတယ်၊ ဒါကြောင့် သတိပေးချက်ကို ဂရုမပြုပါနဲ့။

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

အခု ကျွန်တော်တို့ရဲ့ ဒေတာဖတ်သူ (loader) ကို main.jsx ထဲမှာ import လုပ်ကြပါစို့။ ဒီ ဒေတာဖတ်သူဟာ root အတွက်ဖြစ်တာကြောင့် သူ့ကို rootLoader လို့ခေါ်ပါမယ် :

main.jsximport Root, { loader as rootLoader } from './routes/root';

ပြီးရင် သူ့ကို ကျွန်တော်တို့ရဲ့ လမ်းကြောင်း (route) object ထဲက loader ဆိုတဲ့ property ထဲမှာ ထည့်ပါမယ် :

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
]);