React Router တွင် ဒေတာများ တည်းဖြတ်ရန် လမ်းကြောင်း တစ်ခု ဖန်တီးခြင်း

အရင်သင်ခန်းစာမှာ ကျွန်တော်တို့က React component EditProduct သပ်သပ်ရပ်ရပ်ထဲမှာ တည်းဖြတ်ဖို့ ဖောင်တစ်ခု ဖန်တီးခဲ့ပါတယ်။

အခု import လုပ်ပြီးတာနဲ့ EditProduct အလုပ်လုပ်တဲ့ function ရဲ့ အရင်မှာ လမ်းကြောင်းအသစ်အတွက် loader function ကို ရေးလိုက်ရအောင်။ သူက product.jsx ထဲကလိုပဲ ဖြစ်လိမ့်မယ်။ Function ထဲကို URL parameter တွေ ပို့ပေးမယ်၊ ပြီးရင် သူ့ရဲ့ id အလိုက် ထုတ်ကုန်ကို ရယူမယ်။

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

getProduct ကို forStorage.js ကနေ import လုပ်ပါမယ်။

routes/edit.jsximport { getProduct } from '../forStorage';

အခု ကျွန်တော်တို့ရဲ့ main.jsx ကို ဖွင့်ပြီး ကိုယ်တိုင် ဖန်တီးထားတဲ့ component EditProduct နဲ့ loader ကို import လုပ်လိုက်ရအောင်။

main.jsximport EditProduct, { loader as editProductLoader } from './routes/edit';

ပြီးရင် ထုတ်ကုန်အတွက် လမ်းကြောင်းရဲ့ နောက်ကနေ တည်းဖြတ်ခြင်းအတွက် လမ်းကြောင်း object ကို children array ထဲကို ထည့်လိုက်ပါမယ်။

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
  {
    path: 'products/:productId/edit',
    element: <EditProduct />,
    loader: editProductLoader,
  },
],

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

ကျန်နေသေးတာက ဖောင်ထဲက အကွက်တွေမှာ တည်းဖြတ်ခါနီး လက်ရှိဒေတာတွေ ပါလာအောင် လုပ်ဖို့ပါပဲ။ ဒါအတွက် ကျွန်တော်တို့က edit.jsx ထဲမှာ hook useLoaderData ကို import လုပ်ပါမယ်။

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

ပြီးရင် EditProduct function ထဲမှာ loader ကနေ ဒေတာတွေ ရယူဖို့ သူ့ကို သုံးပါမယ်။ return command ရဲ့ အရင်မှာ သူ့ကို ထည့်လိုက်ပါမယ်။

routes/edit.jsxconst { product } = useLoaderData();

အခု input tag တစ်ခုစီမှာ defaultValue attribute ကို သက်ဆိုင်ရာ input တစ်ခုစီအတွက် တန်ဖိုးတွေနဲ့ ထည့်လိုက်ပါမယ်။ ဥပမာ၊ ပထမ input က အခုဆိုရင် ဒီလိုပုံစံ ဖြစ်သွားပါမယ်။

routes/edit.jsx<input
  placeholder="name"
  type="text"
  name="name"
  defaultValue={product.name}
/>

ကျန်တဲ့ input နှစ်ခုအတွက် တန်ဖိုးတွေကတော့ အသီးသီး 'product.cost' နဲ့ 'product.amount' ဖြစ်ပါတယ်။ ဒါပေမယ့် ခုချိန်ထိ ဖောင်ထဲမှာ ဒေတာတွေ ကျွန်တော်တို့မှာ မရှိသေးပါဘူး။