ဖြေရှင်းထားသည်- ဒေတာဖြတ်သန်းမှုကို တုံ့ပြန်သည့် router dom

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

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

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

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Line 1- ဤလိုင်းသည် useHistory ချိတ်ကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။
// Line 3- ဤစာကြောင်းသည် JSX ကို ပြန်ပေးသည့် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည့် MyComponent ဟုခေါ်သော ကိန်းသေတစ်ခုကို ကြေညာသည်။
// Line 4- ဤစာကြောင်းသည် react-router-dom မှတင်သွင်းသော useHistory ချိတ်တွင် သတ်မှတ်ထားသော အဆက်မပြတ်မှတ်တမ်းဟုခေါ်သော ကိန်းသေတစ်ခုကိုကြေငြာသည်။
// Line 6: ဤစာကြောင်းသည် ကန့်သတ်ချက်တစ်ခုတွင် ဒေတာကို ယူဆောင်သည့် handleClick ဟုခေါ်သော လုပ်ဆောင်ချက်ကို ကြေညာသည်။
// လိုင်း 7- ဤလိုင်းသည် လမ်းကြောင်းအသစ် '/myroute' ဖြင့် လမ်းကြောင်းအသစ်တစ်ခုပေါ်သို့ လမ်းကြောင်းအသစ်တစ်ခုကို တွန်းပို့ရန်နှင့် အရာဝတ္ထုတစ်ခုအနေဖြင့် ဖြတ်သန်းသွားသော ပြည်နယ်ဒေတာကို အသုံးပြုသည်။
// Lines 9 – 11- ဤလိုင်းများသည် handleClick ကိုခေါ်ဆိုပြီး ငြင်းခုံမှုအဖြစ် ဒေတာကိုဖြတ်သန်းသည့် onClick event handler ဖြင့် ခလုတ်ဒြပ်စင်ပါရှိသော JSX ကို ပြန်ပေးသည်။

Router Dom ကို တုံ့ပြန်ပါ။

React Router DOM သည် developer များအား ၎င်းတို့၏ React အပလီကေးရှင်းအတွင်း လမ်းကြောင်းများဖန်တီးရန်နှင့် စီမံခန့်ခွဲရန်ခွင့်ပြုသော React အတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် Link၊ Route၊ Switch နှင့် BrowserRouter ကဲ့သို့သော အစိတ်အပိုင်းများအပါအဝင် ရှုပ်ထွေးပြီး စာမျက်နှာပေါင်းများစွာ ဝဘ်အက်ပ်လီကေးရှင်းများ တည်ဆောက်ရန်အတွက် လိုအပ်သော core အစိတ်အပိုင်းများကို ထောက်ပံ့ပေးသည်။ ၎င်းသည် ဒိုင်းနမစ်လမ်းကြောင်းကိုက်ညီမှုနှင့် တည်နေရာခြေရာခံခြင်းကဲ့သို့သော အင်္ဂါရပ်များကို ပေးဆောင်သည်။ React Router DOM ဖြင့်၊ developer များသည် URL သို့မဟုတ် ဘရောက်ဆာမှတ်တမ်းကို ကိုယ်တိုင်စီမံခန့်ခွဲရန် မလိုဘဲ စာမျက်နှာများစွာရှိသော မြင်ကွင်းများနှင့် လမ်းကြောင်းများရှိသည့် စာမျက်နှာအပလီကေးရှင်းများကို အလွယ်တကူ ဖန်တီးနိုင်သည်။

react-router-Dom တွင် လမ်းကြောင်းပြခြင်းမှတစ်ဆင့် ဒေတာကို သင်မည်သို့ဖြတ်သန်းသနည်း။

React Router တွင်၊ သမိုင်း API ၏ အခြေအနေအရာဝတ္တုကို အသုံးပြု၍ လမ်းကြောင်းပြခြင်းမှတဆင့် ဒေတာကို ဖြတ်သန်းနိုင်သည်။ အခြေအနေအရာဝတ္ထုကို a ဖြင့်ပြန်ဆိုထားသည့် မည်သည့်အစိတ်အပိုင်း၏ props များမှတဆင့်ဝင်ရောက်နိုင်သည်။ အစိတ်အပိုင်း။ ဒေတာဖြတ်ရန်၊ လမ်းညွှန်မှုလုပ်ဆောင်ချက်ကို ခေါ်သောအခါ ၎င်းကို ပြည်နယ်အရာဝတ္တုတွင် ထည့်သွင်းနိုင်သည်။ ဥပမာ:

const { သမိုင်း } = this.props;
history.push({
လမ်းကြောင်းအမည်- '/some/path'၊
အခြေအနေ- { someData- 'ဒေတာ' }
});