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

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

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

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

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

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

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

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

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

<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-ဖိုင်ထဲသို့ ထည့်ရန်ဖြစ်သည်။

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

a.loading {
	color: gray;
}

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

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