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

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

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

<Router>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

1. "react-router-dom" မှ { BrowserRouter ကို Router အဖြစ်၊ လမ်းကြောင်း } ကို တင်သွင်းပါ ။
ဤလိုင်းသည် BrowserRouter နှင့် Route အစိတ်အပိုင်းများကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။

2 ။ ""
ဤလိုင်းသည် အပလီကေးရှင်းရှိ လမ်းကြောင်းများအားလုံးကို ခြုံရန်အသုံးပြုမည့် Router အစိတ်အပိုင်းကို ဖန်တီးပေးပါသည်။

3 ။ ""
ဤစာကြောင်းသည် လမ်းကြောင်း '/' ဖြစ်သောအခါ ပင်မအစိတ်အပိုင်းကို ပြန်ဆိုပေးမည့် လမ်းကြောင်း အစိတ်အပိုင်းကို ဖန်တီးသည်။ 'အတိအကျ' prop သည် လမ်းကြောင်း '/' အတိအကျရှိမှသာ ဤလမ်းကြောင်းနှင့် ကိုက်ညီကြောင်း သေချာစေပါသည်။

4 ။ "” ဤစာကြောင်းသည် လမ်းကြောင်း '/about' ဖြစ်သောအခါ About အစိတ်အပိုင်းကို ပြန်ဆိုပေးမည့် လမ်းကြောင်းအစိတ်အပိုင်းကို ဖန်တီးပေးသည်။

5. “” ဤလိုင်းသည် Router အစိတ်အပိုင်းကို ပိတ်ပြီး ကျွန်ုပ်တို့၏လမ်းကြောင်းအားလုံးကို ကြေညာပြီးဖြစ်ကြောင်း တုံ့ပြန်ရန် အချက်ပြသည်။

npm ပက်ကေ့ဂျ်မန်နေဂျာ

NPM (Node Package Manager) သည် developer များအား ၎င်းတို့၏ React အပလီကေးရှင်းများအတွက် ပက်ကေ့ဂျ်များကို အလွယ်တကူ ထည့်သွင်းခြင်း၊ အပ်ဒိတ်လုပ်ခြင်းနှင့် စီမံခန့်ခွဲရန် ကူညီပေးသည့် JavaScript အတွက် ပက်ကေ့ဂျ်မန်နေဂျာတစ်ခုဖြစ်သည်။ ၎င်းသည် React Router စာကြည့်တိုက်အတွက် မူရင်း ပက်ကေ့ဂျ်မန်နေဂျာဖြစ်ပြီး React အပလီကေးရှင်းများတွင် အသုံးပြုနိုင်သည့် ပက်ကေ့ဂျ်များစွာကို ဝင်ရောက်ခွင့်ပေးသည်။ NPM သည် developer များအား တရားဝင် မှတ်ပုံတင်ခြင်းအပြင် အခြားသော ပြင်ပအဖွဲ့အစည်း အရင်းအမြစ်များမှ ပက်ကေ့ဂျ်များကို လျင်မြန်စွာ ရှာဖွေထည့်သွင်းနိုင်စေပါသည်။ ၎င်းသည် မတူညီသော ပက်ကေ့ဂျ်များအကြား မှီခိုမှုကို စီမံခန့်ခွဲရန် ကိရိယာများကိုလည်း ပံ့ပိုးပေးသည်၊ ၎င်းသည် အပလီကေးရှင်းတစ်ခုတွင် ပက်ကေ့ဂျ်တစ်ခုစီ၏ မည်သည့်ဗားရှင်းကို ထည့်သွင်းထားသည်ကို ခြေရာခံရန် ပိုမိုလွယ်ကူစေသည်။ ထို့အပြင် NPM သည် ရှိပြီးသား ပက်ကေ့ခ်ျများကို အလွယ်တကူ အပ်ဒိတ်လုပ်ရန် သို့မဟုတ် ၎င်းတို့ကို မလိုအပ်တော့ပါက ၎င်းတို့ကို ဖြုတ်ပစ်ရန်ပင် အသုံးပြုနိုင်သည်။

React router dom ဆိုတာဘာလဲ

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

Dom npm react router ကို ဘယ်လို install လုပ်မလဲ။

1. React Router ကို ထည့်သွင်းပါ-
ပထမဦးစွာ npm သို့မဟုတ် yarn ကို အသုံးပြု၍ React Router package ကို ထည့်သွင်းပါ။
ဥပမာအားဖြင့်၊ သင်သည် npm ကိုအသုံးပြုနေပါက၊
npm react-router-dom ကို install လုပ်ပါ။

2. React Router ကို တင်သွင်းပါ-
တပ်ဆင်မှုပြီးသည်နှင့်၊ သင်သည် react-router-dom မှအစိတ်အပိုင်းများကိုသင်၏လျှောက်လွှာသို့တင်သွင်းရန်လိုအပ်သည်။ ဥပမာ:
'react-router-dom' မှ { BrowserRouter ကို Router၊ Route } အဖြစ် တင်သွင်းပါ။

3. သင့်အက်ပ်အား Router အစိတ်အပိုင်းတစ်ခုတွင် ထုပ်ပါ-
နောက်တစ်ဆင့်မှာ သင်၏ root အစိတ်အပိုင်းကို a ဖြင့် ခြုံရန်ဖြစ်သည်။ react-router-dom မှ အစိတ်အပိုင်း။ ၎င်းသည် သင့်အပလီကေးရှင်းအား လမ်းကြောင်းပေးနိုင်စွမ်းများကို ပေးဆောင်မည်ဖြစ်ပြီး အသုံးပြုသူလည်ပတ်နေသည့် လက်ရှိ URL လမ်းကြောင်းကို သိရှိစေမည်ဖြစ်သည်။ ဥပမာ:

const App = () => (
 
 

    );

4. သင့်အက်ပ်သို့ လမ်းကြောင်းများထည့်ပါ- နောက်ဆုံးအဆင့်မှာ သင့်အပလီကေးရှင်းသို့ လမ်းကြောင်းများကို ပေါင်းထည့်ရန်ဖြစ်သည်။ react router dom မှပေးသော အစိတ်အပိုင်း။ လမ်းကြောင်းအစိတ်အပိုင်းသည် ကျားကန်နှစ်ခုကို ယူသည်။ အသုံးပြုသူတစ်ဦးသည် သင့်အပလီကေးရှင်းရှိ အချို့သော URL လမ်းကြောင်းသို့ ဝင်ရောက်သည့်အခါ မည်သည့်အစိတ်အပိုင်းများကို ပြန်ဆိုသင့်သည်ကို သတ်မှတ်ခွင့်ပြုသည့် လမ်းကြောင်းနှင့် အစိတ်အပိုင်းများ ဥပမာ-

const App = () => (
 
 

   )