ဖြေရှင်းထားသည်- react router မှတ်တမ်း%2Cpush တွင် ဒေတာဖြတ်သန်းခြင်း။

react router မှတ်တမ်းတွင် ဒေတာဖြတ်သွားခြင်းနှင့် သက်ဆိုင်သည့် အဓိကပြဿနာမှာ၊ တွန်းပို့ခြင်းမှာ စာမျက်နှာပြန်လည်ဆန်းသစ်ခြင်းတစ်လျှောက်တွင် ဒေတာဆက်လက်တည်မြဲနေခြင်းမဟုတ်ပါ။ အသုံးပြုသူတစ်ဦးသည် စာမျက်နှာကို ပြန်လည်စတင်သောအခါ၊ history.push တွင်သိမ်းဆည်းထားသောဒေတာသည် ပျောက်ဆုံးသွားမည်ဖြစ်ပြီး နောက်စာမျက်နှာဖွင့်သည့်အခါတွင် အသုံးပြုရန်အတွက် မရနိုင်ပါ။ ၎င်းသည် မမျှော်လင့်ထားသော အပြုအမူကို ဖြစ်ပေါ်စေနိုင်ပြီး ယခင်စာမျက်နှာတစ်ခုမှ ဒေတာများကို ရယူရန် သို့မဟုတ် သိမ်းဆည်းရန် ကြိုးစားသည့်အခါ ပြဿနာများ ဖြစ်စေနိုင်သည်။

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

1. ဤစာကြောင်းသည် အက်ပ်အတွင်းရှိ လက်ရှိတည်နေရာကို ခြေရာခံသည့် သမိုင်းအရာဝတ္တုသို့ ဝင်ရောက်ခွင့်ပေးသည့် react-router-dom စာကြည့်တိုက်မှ useHistory ချိတ်ကို တင်သွင်းသည်။

2. ဤစာကြောင်းသည် MyComponent ဟုခေါ်သော လုပ်ဆောင်ချက်ဆိုင်ရာ အစိတ်အပိုင်းတစ်ခုကို ကြေညာပြီး ၎င်းကို ကိန်းသေကိန်းရှင်အဖြစ် သတ်မှတ်ပေးသည်။

3. ဤစာကြောင်းသည် မှတ်တမ်းအရာဝတ္တုသို့ ဝင်ရောက်ခွင့်ရရန် လိုင်း 1 တွင် တင်သွင်းထားသော useHistory ချိတ်ကို အသုံးပြုပြီး ၎င်းကို သမိုင်းဟုခေါ်သည့် ကိန်းသေပုံစံတစ်ခုသို့ သတ်မှတ်ပေးသည်။

4. ဤစာကြောင်းသည် data ဟုခေါ်သော အငြင်းအခုံတစ်ခုကို ယူဆောင်ကာ history.push() ကို အသုံးပြု၍ history.push() ကို အသုံးပြု၍ လမ်းကြောင်းအမည်နှင့် နိုင်ငံတော်ဂုဏ်သတ္တိများပါရှိသော အရာဝတ္ထုတစ်ခုကို တွန်းပို့သည့် handleClick ဟုခေါ်သော လုပ်ဆောင်ချက်ကို ဤစာကြောင်းက ကြေညာသည်။

5. ဤစာကြောင်းသည် အသုံးပြုသူတစ်ဦးက နှိပ်လိုက်သောအခါ အချို့သောဒေတာပါရှိသော အရာတစ်ခုဖြင့် handleClick() ကို ခေါ်သည့် onClick event handler ဖြင့် ခလုတ်ဒြပ်စင်ကို ပြန်ပေးသည်။

သမိုင်းတွန်း

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

react router တွင် history ကို ဘယ်လိုသုံးရမလဲ

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

React Router တွင် မှတ်တမ်းကို အသုံးပြုရန်၊ သမိုင်းပက်ကေ့ခ်ျမှ createHistory() နည်းလမ်းကို အသုံးပြု၍ မှတ်တမ်းအရာဝတ္ထုတစ်ခုကို ဖန်တီးရန် လိုအပ်သည်။ ၎င်းသည် သင့်အား push(), replace(), နှင့် go() ကဲ့သို့သော နည်းလမ်းများကို အသုံးပြုခွင့်ပေးမည်ဖြစ်သည်။ ဤနည်းလမ်းများသည် ဘရောင်ဇာ၏ URL ကို စီမံခန့်ခွဲနိုင်ပြီး သင့်အပလီကေးရှင်းရှိ မတူညီသောလမ်းကြောင်းများကြားတွင် သွားလာနိုင်စေပါသည်။ URL တွင်ပြောင်းလဲမှုများကိုနားဆင်ရန်နှင့်သင်၏အပလီကေးရှင်းကိုလိုက်လျောညီထွေမွမ်းမံရန် listen() နည်းလမ်းကိုလည်းသုံးနိုင်သည်။

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

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