React Router တွင် လမ်းညွှန်အခြေအနေ

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

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့၏စာမျက်နှာ မည်သည့်အခြေအနေတွင်ရှိနေသည်ကို သုံးစွဲသူအား ပြသပါမည်။ ၎င်းတွင် useNavigation ဟွက်က ကျွန်ုပ်တို့ကို ကူညီနိုင်ပါသည်။ ဤဟွက်၏ လုပ်ဆောင်ချက်ရလဒ်သည် ဂုဏ်သတ္တိများစွာပါရှိသော အော့ဘဂျက်တစ်ခုကို ထုတ်ပေးပါသည်။ ကျွန်ုပ်တို့ စိတ်ဝင်စားမည့် အရာမှာ ၎င်းတို့ထဲမှတစ်ခုဖြစ်သော state ဂုဏ်သတ္တိဖြစ်သည်။

state ဂုဏ်သတ္တုတွင် 3 ခုသော တန်ဖိုးများ ရှိနိုင်ပါသည် - 'idle' (ဘာမှမဖြစ်ပါ), 'submitting' (POST, PUT, PATCH သို့မဟုတ် DELETE ဖြင့် ဖောင်တင်သွင်းသည့်အခါ လမ်းကြောင်း၏ action ကိုခေါ်ပါက), 'loading' (နောက်လမ်းကြောင်းအတွက် လိုဒါကိုခေါ်ပါက၊ နောက်စာမျက်နှာကို ပုံဖော်ရန်အတွက်ဖြစ်သည်)။ ကျွန်ုပ်တို့ စိတ်ဝင်စားမည့်တန်ဖိုးမှာ နောက်ဆုံးတန်ဖိုးဖြစ်သည်။

ယခု root.jsx ဖိုင်ထဲသို့ဝင်ပြီး ဤဟွက်ကို ထည့်သွင်းလိုက်ပါမည်-

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

ထို့နောက်၊ ဟွက်မှပြန်လာသောရလဒ်အတွက်၊ Root လုပ်ဆောင်ချက်အတွင်း return မတိုင်မီ navigation ကိန်းရှင်ကို သတ်မှတ်ပါမည်-

routes/root.jsxconst { products } = useLoaderData();
const navigation = useNavigation();

ယခု ၎င်း၏ state ဂုဏ်သတ္တိကို အသုံးပြုပါမည်၊ တန်ဖိုးသည် 'loading' ဖြစ်ပါက၊ ကျွန်ုပ်တို့ ထုတ်ကုန်ဒေတာများကို ပုံဖော်သည့်ဒီဗွီအတွက် loading ကလပ်စ်ကို သတ်မှတ်ပေးပါမည်-

routes/root.jsx<div id="product" className={navigation.state === 'loading' ? 'loading' : ''}>
  <Outlet />
</div>

index.css ထဲတွင် loading ကလပ်စ်အတွက် စတိုင်များထည့်ရန် ကျန်ရှိနေပါသေးသည်။ တင်ခြင်းအခြေအနေဖြစ်ပါက opacity ကို မြှင့်တင်ပေးပါမည်-

index.cssdiv.loading {
  opacity: 0.3;
}

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