ဖြေရှင်းထားသည်- နောက်စာမျက်နှာအပေါ်ဆုံးရှိ router ကို တုံ့ပြန်ပါ။

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

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

const NextPage = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/next-page');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to next page</button>
    </div>  
  );  
};

// Line 1- ဤလိုင်းသည် useRouter ချိတ်ကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။
// Line 3- ဤစာကြောင်းသည် React အစိတ်အပိုင်းကို ပြန်ပေးသည့် NextPage ဟုခေါ်သော လုပ်ဆောင်ချက်ကို ကြေညာသည်။
// Line 4: ဤလိုင်းသည် router ဟုခေါ်သော variable တစ်ခုကိုကြေငြာပြီး useRouter hook သို့ သတ်မှတ်ပေးသည်။
// Line 6- ဤလိုင်းသည် '/next-page' ၏ အကြောင်းပြချက်ဖြင့် router ၏ push method ကိုခေါ်သည့် handleClick ဟုခေါ်သော function ကိုကြေငြာသည်။
// Lines 8-11- ဤလိုင်းများသည် ကိုင်တွယ်ရန် onClick prop သတ်မှတ်ပေးထားသော onClick prop ပါသော ခလုတ်ဒြပ်စင်တစ်ခုဖြင့် ဤစာကြောင်းများသည် React အစိတ်အပိုင်းကို ပြန်ပေးသည်။ နှိပ်လိုက်သောအခါ၊ ၎င်းသည် handleClick လုပ်ဆောင်ချက်ကို ခေါ်ပြီး '/next-page' သို့ လမ်းညွှန်သွားမည်ဖြစ်သည်။

စာမျက်နှာများကြားတွင် သွားလာပါ။

React Router သည် သင့်အား မျက်နှာပြင်အသစ်များထည့်ကာ သင့်အပလီကေးရှင်းထံ မယုံနိုင်လောက်အောင်လျင်မြန်စွာ စီးဆင်းသွားစေရန် ကူညီပေးသည့် React ၏ထိပ်တွင်တည်ဆောက်ထားသည့် အားကောင်းသည့်လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်ပြီး URL ကို စာမျက်နှာပေါ်ရှိပြသထားသည့်အရာများနှင့် ထပ်တူကျအောင်ထားနေစဥ်အချိန်တိုင်း၊ React Router သည် ၎င်း၏ အစိတ်အပိုင်း-အခြေခံချဉ်းကပ်နည်းကို အသုံးပြု၍ React အပလီကေးရှင်းရှိ စာမျက်နှာများကြားတွင် သွားလာရန် လွယ်ကူစေသည်။ Link၊ NavLink နှင့် Redirect ကဲ့သို့သော အစိတ်အပိုင်းများ၏ အကူအညီဖြင့်၊ သင်သည် URLs များကို ကိုယ်တိုင်ရိုက်ထည့်စရာမလိုဘဲ အသုံးပြုသူများ သင့်အက်ပ်အတွင်း ရွှေ့နိုင်စေမည့် တက်ကြွပြီး အပြန်အလှန်အကျိုးပြုသော လမ်းကြောင်းပြလင့်ခ်များကို ဖန်တီးနိုင်ပါသည်။ ထို့အပြင်၊ သင်သည် သင့်အပလီကေးရှင်းအတွင်းရှိ စာမျက်နှာများကြားတွင် ပရိုဂရမ်ကျကျ သွားလာရန် React Router မှ ပံ့ပိုးပေးထားသည့် မှတ်တမ်းအရာဝတ္ထုကို အသုံးပြုနိုင်သည်။

ScrollToTop သို့မဟုတ် Next စာမျက်နှာအပေါ်ဆုံး

ScrollToTop သည် မတူညီသောလမ်းကြောင်းများကြားတွင် သွားလာနေချိန်တွင် စာမျက်နှာ၏ထိပ်ပိုင်းသို့ လျင်မြန်စွာ ပြန်ရွှေ့နိုင်စေရန် အသုံးပြုသူများအား React Router တွင် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။ အကြောင်းအရာများစွာပါရှိသော ရှည်လျားသော စာမျက်နှာများအတွက် အထူးသဖြင့် ၎င်းသည် အသုံးပြုသူများအား ကိုယ်တိုင် scroll လုပ်စရာမလိုဘဲ ထိပ်ဆုံးသို့ အမြန်ပြန်တက်နိုင်စေသောကြောင့် ၎င်းသည် အသုံးပြုသူများအား အထူးအသုံးဝင်ပါသည်။ နောက်စာမျက်နှာအပေါ်ဆုံးသည် အလားတူလုပ်ဆောင်နိုင်သည့် အလားတူအင်္ဂါရပ်တစ်ခုဖြစ်သော်လည်း အရန်ကူးယူမည့်အစား လမ်းကြောင်းများကြားတွင် သွားလာသည့်အခါ နောက်စာမျက်နှာသို့ တိုက်ရိုက်ပို့ဆောင်ပေးပါသည်။ ၎င်းသည် စာမျက်နှာတစ်ခုရှိ သီးခြားအချက်အလက်များကို ရှာဖွေနေပြီး ထိုနေရာသို့မရောက်မီ အခြားစာမျက်နှာများရှိ အကြောင်းအရာအားလုံးကို ရွှေ့ရန်မလိုသော အသုံးပြုသူများအတွက် အထူးသဖြင့် အထောက်အကူဖြစ်စေနိုင်သည်။ အင်္ဂါရပ်နှစ်ခုလုံးသည် အသုံးပြုသူအတွေ့အကြုံကို မြှင့်တင်ရန်နှင့် လမ်းကြောင်းရှာဖွေမှု ပိုမိုလွယ်ကူမြန်ဆန်စေရန် ကူညီပေးသည့် ကောင်းမွန်သော ထပ်လောင်းများဖြစ်သည်။