Redux တွင် ဘရောက်ဆာရှိ ထုတ်ကုန်စာမျက်နှာ

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

ဦးစွာအနေနှင့် ၎င်းပေါ်လာမည့် လိပ်စာအတွက် ချိတ်ဆက်ပေးပါမည်။ App.jsx ဖိုင်ကို ဖွင့်ပါ၊ အထဲတွင် ကျွန်ုပ်တို့သည် လမ်းကြောင်းများကို ရေးသားထားပြီး၊ children အတွင်းသို့ နောက်ထပ် ကလေးလမ်းကြောင်းတစ်ခု ထည့်သွင်းပါမည် (ProductPage.jsx ကို import လုပ်ရန် မမေ့ပါနှင့်)။ လမ်းကြောင်းနှင့် ပြသမည့် ကွန်ပြူနာကို သတ်မှတ်ပါမည်။

App.jsx{
  path: '/products/:productId',
  element: <ProductPage />,
},

ယခု ProductsList.jsx ဖိုင်ကို products ဖိုလ်ဒါအတွင်း ဖွင့်ပြီး dispProducts အတွက် ကုဒ်ကို အနည်းငယ်ပြောင်းလဲပါမည်။ ယခုအခါတွင် ကျွန်ုပ်တို့တွင် ထုတ်ကုန်တစ်ခုချင်းစီ၏ အပြည့်အစုံအချက်အလက်ပါသည့် သီးသန့်စာမျက်နှာရှိသည်။ ဆိုလိုသည်မှာ ထုတ်ကုန်စာရင်းတွင် ကျွန်ုပ်တို့သည် ထုတ်ကုန်၏အမည်နှင့် ဖြတ်တောက်ထားသော ဖော်ပြချက်ကိုသာ ပြသပါမည်။ ထို့အပြင် နေဗီဂေရှင်း အစိတ်အပိုင်းတစ်ခုဖြစ်သော ရောက်တာစာကြည့်တိုက်မှ Link ကို လင့်ခ်အဖြစ် ထည့်သွင်းပါမည်၊ အကြောင်းမှာ ၎င်းကို နှိပ်လိုက်သောအခါ ထုတ်ကုန်စာမျက်နှာသို့ ရောက်ရှိနိုင်မည် ဖြစ်သည်။ product-excerpt ဆိုသည့် ကလပ်စ်ကိုလည်း ဒစ်ဗွီသို့ ထည့်သွင်းပါမည်၊ ထို့ကြောင့် ထုတ်ကုန်များကို ခွဲခြားနိုင်မည်။ ယခုအခါတွင် ကျွန်ုပ်တို့၏ dispProducts အတွက် ကုဒ်သည် အောက်ပါအတိုင်း ဖြစ်လာမည်။

products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id} className="product-excerpt">
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <Link to={`/products/${product.id}`} className="link-btn">
      view
    </Link>
  </div>
))

Link ကို import လုပ်ပါမည်။

products/ProductsList.jsximport { Link } from 'react-router-dom'

ထို့နောက် index.css ဖိုင်တွင် link-btn နှင့် product-excerpt ကလပ်စ်များအတွက် စတိုင်များထည့်သွင်းပါမည်။

index.css.product-excerpt {
  margin-top: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.link-btn {
  border: 1.5px solid gray;
  border-radius: 10px;
  background-color: coral;
  color: black;
  padding: 1px 12px 1px 12px;
}

နောက်ဆုံးအနေနှင့်၊ ဘယ်ဘက်မီနူးရှိ ထုတ်ကုန်စာရင်းစာမျက်နှာသို့ ဦးတည်သော လင့်ခ်ကို လည်း အလုပ်လုပ်အောင် ပြုလုပ်ပါမည်၊ သို့မှသာ ကျွန်ုပ်တို့သည် အခြားနေရာများမှ ၎င်းသို့ ရောက်ရှိနိုင်မည် ဖြစ်သည်။ ဤအတွက် ကျွန်ုပ်တို့၏ root.jsx ဖိုင်ကို ဖွင့်ပြီး အောက်ပါကုဒ်လိုင်းကို ဖျက်ပါမည်။

app/root.jsx<a>Products</a>

အောက်ပါအတိုင်း အစားထိုးပါမည်။

app/root.jsx<NavLink to="/products" end>
  Products
</NavLink>

React ရောက်တာအတွက် စာကြည့်တိုက်မှ NavLink ကို import လုပ်ရန် မမေ့ပါနှင့်။

app/root.jsximport { Outlet, NavLink } from 'react-router-dom'

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