React Router မှ data loader မှရရှိသော အချက်အလက်များကို အသုံးပြုခြင်း

ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် loader ကို အသုံးပြု၍ သိုလှောင်ရုံမှ အချက်အလက်များကို ရယူခဲ့သည်။ ထိုအချက်အလက်များကို အသုံးပြုရန်အတွက် ကျွန်ုပ်တို့သည် useLoaderData ဟုခေါ်သော hook ကို အသုံးပြုသည်။ root.jsx ဖိုင်ကို ဖွင့်ပြီး import ထဲတွင် ထို hook ကို ထည့်ကြည့်မည်။

routes/root.jsximport { Outlet, Link, useLoaderData } from 'react-router-dom';

ယခု Root လုပ်ဆောင်ချက်အတွင်း၌ ကျွန်ုပ်တို့သည် အချက်အလက်များကို products ဟူသော အမြဲတမ်းတန်ဖိုးအတွင်းသို့ ရယူပြီး ၎င်းနှင့်အတူ အလုပ်လုပ်မည်။ ကျွန်ုပ်တို့တွင် ထုတ်ကုန်များ ရှိပါက စာရင်းကို ပြသမည်၊ မရှိပါက စာပိုဒ် 'no products here ...' ကို ထုတ်ပြမည်။ nav tag အတွင်း၌ ယခု ရရှိလာသော ထုတ်ကုန်များကို ဖော်ပြရန် စံသတ်မှတ်ချက် loop ကို အသုံးပြုသည်။ ဒြပ်စင်တစ်ခုစီသည် Link component ဖြင့် အထပ်ထပ် ထားရှိမည်ဖြစ်ပြီး တစ်ခုစီ၏ လိပ်စာသည် မတူညီမည် (၎င်းအကြောင်းကို နောက်မှ ဆွေးနွေးပါမည်)။ ထို့ကြောင့် ထုတ်ကုန်တွင် အမည်မရှိပါက 'Unnamed' ကို စံအတိုင်း ဖော်ပြမည်။ ထို့ကြောင့် အထက်ဖော်ပြပါအတိုင်း ယခု ကျွန်ုပ်တို့၏ Root လုပ်ဆောင်ချက်အတွက် ကုဒ်သည် ဤသို့ဖြစ်လာမည်။

root.jsxfunction Root() {

  const { products } = useLoaderData();
  return (
    <div id="main">
      {products.length ? (
        <nav>
          {products.map((product) => (
            <Link key={product.id} to={`products/${product.id}`}>
              {product.name ? product.name : <i>Unnamed</i>}
            </Link>
          ))}
        </nav>
      ) : (
        <p><i>no products here ...</i></p>
      )}
      <div id="product">
        <Outlet />
      </div>
    </div>
  );
}

အကယ်၍ ယခု ကျွန်ုပ်တို့သည် application ကို ပြန်စမ်းကြည့်ပြီး ပင်မစာမျက်နှာသို့ ဝင်ကြည့်ပါက 'no products here ...' ကိုသာ မြင်ရမည်။ အဘယ်ကြောင့်ဆိုသော် သိုလှောင်ရုံအတွင်း ကျွန်ုပ်တို့သည် မည်သည့်ထုတ်ကုန်ကိုမျှ ထည့်သွင်းထားခြင်း မရှိသေးပါ။