ဖြေရှင်းထားသည်- အားလုံးကိုဖမ်းယူရန် Router အား တုံ့ပြန်မှုထည့်ပါ။

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

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// Line 1- ဤလိုင်းသည် BrowserRouter၊ Route နှင့် Switch အစိတ်အပိုင်းများကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။
// Line 2: ဤစာကြောင်းသည် လုပ်ဆောင်ချက် အစိတ်အပိုင်းတစ်ခုဖြစ်သည့် App ဟုခေါ်သော ကိန်းသေတစ်ခုကို သတ်မှတ်သည်။
// Line 3: ဤလိုင်းသည် Router အစိတ်အပိုင်းအား react-router-dom မှ ပြန်ဆိုသည်။
// Line 4: ဤလိုင်းသည် Switch component အား react-router-dom မှ ပြန်ဆိုသည်။
// Lines 5 နှင့် 6- ဤလမ်းကြောင်းများသည် ထိုလမ်းကြောင်းများနှင့် ကိုက်ညီသောအခါတွင် တိကျသောလမ်းကြောင်းများနှင့် အစိတ်အပိုင်းများကို ပြန်ဆိုရန် လမ်းကြောင်းနှစ်ခုကို လမ်းကြောင်းအစိတ်အပိုင်းများကို ထုတ်ပေးပါသည်။
// လိုင်း 8- အခြားလမ်းကြောင်းများနှင့် မကိုက်ညီပါက ဤလိုင်းသည် နောက်ပြန်လမ်းကြောင်းကို ထုတ်ပေးသည်။ အခြားလမ်းကြောင်းများနှင့် မကိုက်ညီပါက ၎င်းသည် NoMatch အစိတ်အပိုင်းကို တင်ဆက်ပေးမည်ဖြစ်သည်။

React router ဆိုတာဘာလဲ

React Router သည် React အပလီကေးရှင်းများအတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် React အပလီကေးရှင်းတွင် မတူညီသော စာမျက်နှာများကြားတွင် သွားလာရန် အသုံးပြုနိုင်သည့် လမ်းကြောင်းများနှင့် အစိတ်အပိုင်းများကို ဖန်တီးသူများအား ဖန်တီးခွင့်ပြုသည်။ ၎င်းသည် ဒိုင်းနမစ်လမ်းကြောင်း ကိုက်ညီမှု၊ မေးမြန်းမှု ကန့်သတ်ချက်များနှင့် တည်နေရာအခြေအနေကဲ့သို့သော အင်္ဂါရပ်များကို ပံ့ပိုးပေးပါသည်။ ထို့အပြင်၊ ၎င်းသည် server-side rendering နှင့် code splitting အတွက် ပံ့ပိုးမှုပေးပါသည်။

သိမ်း-အားလုံး ဆုတ်ခွာလမ်းကြောင်း

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

နောက်ပြန်လမ်းကြောင်းကို မှန်ကန်စွာ ဘယ်လိုသတ်မှတ်မလဲ။

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

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

ဆုတ်ယုတ်မှုလမ်းကြောင်းက ဘာကြောင့် အမြဲတမ်း အစပျိုးလာတာလဲ။

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