React Router တွင် ဒေတာများ ထည့်သွင်းခြင်း

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

root.jsx ဖိုင်ကို ဖွင့်ပြီး nav မတိုင်မီ ထုတ်ကုန်အသစ်ထည့်ရန် ခလုတ်တစ်ခုကို ဖော်များ tag ဖြင့်ထည့်ကာ layout ထဲသို့ ထည့်ပါမည်။ ထို့အပြင် ယခုခလုတ်နှင့် ကျွန်ုပ်တို့၏ list ကို #menu id ပါသော div တစ်ခုထဲသို့ ထပ်ထည့်ပါမည်။ layout သည် ယခုအခါ အောက်ပါအတိုင်း ဖြစ်သွားပါမည်:

routes/root.jsxreturn (
  <div id="main">
    <div id="menu">
      <form method="post">
        <button type="submit">ထုတ်ကုန်ထည့်ပါ</button>
      </form>
      {products.length ? (
      <nav>
        {products.map((product) => (
        <Link key={product.id} to={`products/${product.id}`}>
          {product.name ? product.name : <i>အမည်မရှိ</i>}
        </Link>
        ))}
      </nav>
      ) : (
      <p>
        <i>ဤနေရာတွင် ထုတ်ကုန်မရှိပါ...</i>
      </p>
      )}
    </div>

    <div id="product">
      <Outlet />
    </div>
  </div>
);

ယခု ကျွန်ုပ်တို့သည် developer panel ၏ 'Network' tab သို့သွားပြီး ကျွန်ုပ်တို့၏ခလုတ်ကို နှိပ်ကြည့်လျှင် ဆာဗာသို့ မှားယွင်းသော စာမျက်နှာတောင်းဆိုမှုကို တွေ့ရပါမည်။ React Router ဖြင့် ကျွန်ုပ်တို့သည် ကလိုင်းဘက်တွင် လမ်းကြောင်းပြခြင်းကို ထပ်မံအသုံးပြု၍ ဆာဗာသို့ တောင်းဆိုမှုကို ဖယ်ရှားပါမည်။

ဤအတွက် form tag ကို React Router ၏ Form component ဖြင့် အစားထိုးပါမည်။ အရင် Form ကို import လုပ်ပါ:

routes/root.jsximport { Form } from 'react-router-dom';

ယခု ကုဒ်၏အပိုင်းအနည်းငယ်တွင် ရှိသော form tag များကို အစားထိုးပါ:

root.jsx<Form method="post">
  <button type="submit">ထုတ်ကုန်ထည့်ပါ</button>
</Form>

ကျွန်ုပ်တို့၏ application ကို ပြန်စပြီး developer panel ကို ထပ်ကြည့်ပါ။ ထုတ်ကုန်ထည့်ရန် ခလုတ်ကို နှိပ်ကြည့်ပါ - ယခုဆိုလျှင် ဆာဗာသို့ တောင်းဆိုမှု မရှိတော့ပါ (အမှားအတွက် ယခုအချိန်တွင် စိတ်မပူပါနှင့်)။