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

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

import { getProduct } from '../forStorage';

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

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

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

import { useLoaderData } from 'react-router-dom';

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

const { product } = useLoaderData();

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

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

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

<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 အဖြစ် အမည်ပေးပါမည်။

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

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

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

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

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