React Router တွင် URL parameter များမှ loader ဒေတာများရယူခြင်း

ယခင်သင်ခန်းစာတွင် ထုတ်ကုန်စာမျက်နှာအတွက် ဒေတာများရယူရန် function တစ်ခုရေးခဲ့ပါသည်။ ဖိုင်တွင် product.jsx getProduct ကို import လုပ်ကြပါစို့။

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

Import လုပ်ပြီးနောက်နှင့် Product function မတိုင်မီ loader function ကို ရေးကြပါစို့။ ၎င်းအတွင်းသို့ URL parameter များကို ပေးပို့ပါ။

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

ထို့အပြင် loader မှရရှိသော ဒေတာများကို အသုံးပြုရန် useLoaderData hook ကို import လုပ်ပါ။

routes/product.jsximport { useLoaderData } from 'react-router-dom';

useLoaderData ကို အသုံးပြုပါ။ ထို့အတွက် Product function ၏ အစတွင် product object ကိုဖန်တီးသော စာကြောင်းကို အောက်ပါအတိုင်း အစားထိုးပါ။

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

ထို့ကြောင့် ကျွန်ုပ်တို့၏ layout ကိုအနည်းငယ်ပြောင်းရမည်။ အဘယ်ကြောင့်ဆိုသော် product object ဟောင်းကို ဖယ်ရှားခဲ့ပြီးဖြစ်သည်။ စာပိုဒ်များ၏ အတွင်းအကြောင်းအရာကို အစားထိုးပါ။

routes/product.jsx<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

အောက်ပါအတိုင်း ပြောင်းလဲပါ။

routes/product.jsx<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

ကျွန်ုပ်တို့အနေဖြင့် main.jsx ဖိုင်ကိုဖွင့်၍ loader ကို import လုပ်ရန် ကျန်ရှိနေပါသေးသည်။ ၎င်းကို productLoader အဖြစ် အမည်ပေးပါမည်။

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

ထို့နောက် ၎င်းကို ထုတ်ကုန်စာမျက်နှာအတွက် route object ၏ loader အဖြစ် သတ်မှတ်ပါ။ element property နောက်တွင် children အတွင်း၌ ထည့်သွင်းပါ။

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

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