React Router တွင် တက်ကြွလင့်ခ်ကို အလင်းပန်းထုတ်ခြင်း

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

ပထမဦးစွာ အဓိကစာမျက်နှာသို့သွားပါ၊ စာရင်းထဲသို့ ထုတ်ကုန် 4 ခုကို ထည့်ပြီး တစ်ခုချင်းစီအတွက် ဒေတာများကို ထည့်သွင်းပါ။ ၎င်းတို့ကို မည်သည့်အမည်မဆိုပေးနိုင်သည်။

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

ယခု root.jsx ကိုဖွင့်ပြီး NavLink ကိုတင်သွင်းပါ (Link ၏တင်သွင်းမှုကို ဖယ်ရှားရန် မမေ့ပါနှင့်၊ မဟုတ်လျှင် React က စောဒကတက်နိုင်သည်၊ ကျွန်ုပ်တို့ ၎င်းကို နောက်ထပ်မသုံးတော့သောကြောင့်)။

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

ထို့နောက် လေယာဉ်ပုံစံတွင် ကွန်ပြူနာပစ္စည်း Link ကို NavLink ဖြင့် အစားထိုးပါ။

routes/root.jsx<NavLink key={product.id} to={`products/${product.id}`}>
  {product.name ? product.name : <i>unnamed</i>}
</NavLink>

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

routes/root.jsx<NavLink
  key={product.id}
  to={`products/${product.id}`}
  className={({ isActive, isPending }) =>
    isActive ? 'active' : isPending ? 'loading' : ''
  }
>
  {product.name ? product.name : <i>Unnamed</i>}
</NavLink>

ကျွန်ုပ်တို့အတွက် ကျန်ရှိနေသေးသည်မှာ active နှင့် loading အတန်းအစားများအတွက် စတိုင်များကို ကျွန်ုပ်တို့၏ css-ဖိုင်ထဲသို့ ထည့်ရန်ဖြစ်သည်။

index.cssa.active {
  font-weight: bold;
  color: brown;
}

a.loading {
  color: gray;
}

ပြီးပါပြီ။ ယခု စာရင်းထဲရှိ ထုတ်ကုန်များကို နှိပ်ကြည့်ပါ။