ဖြေရှင်းပြီးသား- react router dom ကို ဒေါင်းလုဒ်လုပ်ပါ။

React Router DOM ကို ဒေါင်းလုဒ်ဆွဲခြင်းနှင့် ပတ်သက်သည့် အဓိကပြဿနာမှာ configure လုပ်ပြီး set up လုပ်ရန် ခက်ခဲနေခြင်းဖြစ်သည်။ React Router DOM သည် ဒစ်ဂျစ်တိုက်အသစ်ဖြစ်နေသော developer များအတွက် အချိန်ကုန်ပြီး ရှုပ်ထွေးနိုင်သည်။ ထို့အပြင်၊ React Router DOM သည် အဆက်မပြတ် ပြောင်းလဲနေသောကြောင့် developer များသည် ၎င်းတို့၏ application များနှင့် လိုက်ဖက်မှုရှိစေရန်အတွက် နောက်ဆုံးထွက်ဗားရှင်းဖြင့် နောက်ဆုံးပေါ်ဗားရှင်းကို ဆက်လက်ရှိနေရမည်ဖြစ်သည်။

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

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

2. “ReactDOM.render(” – ဤစာကြောင်းသည် ReactDOM render method အား ပေးဆောင်ထားသော container အတွင်းရှိ DOM သို့ React element တစ်ခုသို့ ပြန်ပို့ပေးပြီး အစိတ်အပိုင်းအား ရည်ညွှန်းချက်တစ်ခု (သို့မဟုတ် နိုင်ငံမဲ့အစိတ်အပိုင်းများအတွက် null ပြန်ပေးသည်)။

3 ။ "” – ၎င်းသည် ကျွန်ုပ်တို့၏ application အတွက် routing လုပ်ဆောင်နိုင်စွမ်းကို ပံ့ပိုးပေးရန်အတွက် ကျွန်ုပ်တို့၏လမ်းကြောင်းများအားလုံးကို ခြုံငုံရန်အသုံးပြုမည့် Router အစိတ်အပိုင်းတစ်ခုအတွက် အဖွင့် tag တစ်ခုဖြစ်သည်။

4 ။ "” – ဤသည်မှာ ကျွန်ုပ်တို့၏ အပလီကေးရှင်းအတွင်း လမ်းကြောင်းတစ်ခုတည်းကို သတ်မှတ်ရန် အသုံးပြုမည့် '/' တွင် တောင်းဆိုမှုများနှင့် ကိုက်ညီမည့် လမ်းကြောင်းအစိတ်အပိုင်းအတွက် အဖွင့် tag တစ်ခုဖြစ်သည်။

5 ။ "” – ဤလမ်းကြောင်းကို react router dom ဖြင့် လိုက်ဖက်သောအခါတွင် ဤလမ်းကြောင်းကို ကျွန်ုပ်တို့၏ DOM သစ်ပင်တွင် အက်ပ်အစိတ်အပိုင်းတစ်ခု တင်ဆက်ပေးသည့် အပိတ် tag တစ်ခုဖြစ်သည်။
အက်ပ် အစိတ်အပိုင်းသည် ကျွန်ုပ်တို့၏ကုဒ်ဘေ့စ်ရှိ အခြားနေရာတွင် ကျွန်ုပ်တို့သတ်မှတ်ထားသော တုံ့ပြန်မှုဆိုင်ရာ အစိတ်အပိုင်း သို့မဟုတ် အခြားစာကြည့်တိုက် သို့မဟုတ် ပက်ကေ့ဂျ်များဖြစ်သည့် Material UI သို့မဟုတ် Bootstrap စသည်တို့မှ တင်သွင်းခြင်းဖြစ်နိုင်သည်။

6. “” – ဤအရာသည် အထက်လိုင်း 4 တွင်ဖွင့်ထားသော Route Component အတွက် အပိတ်အမှတ်အသားဖြစ်ပြီး၊ ၎င်းသည် ဤလမ်းကြောင်း၏ သီးခြားအဓိပ္ပါယ်ဖွင့်ဆိုချက်ကို ပိတ်လိုက်သောကြောင့် ဤတစ်ခု၏လုပ်ဆောင်နိုင်စွမ်း သို့မဟုတ် အပြုအမူကို မထိခိုက်စေဘဲ အခြားလမ်းကြောင်းများကို ကျွန်ုပ်တို့၏ codebase တွင် နောက်မှထည့်သွင်းနိုင်မည်ဖြစ်သည်။ .

7. “” – ဤသည်မှာ အထက်လိုင်း 3 တွင်ဖွင့်ထားသော Router Component အတွက် အပိတ်အမှတ်အသားဖြစ်ပြီး၊ ၎င်းသည် ဤ router ၏ သီးခြားအဓိပ္ပါယ်ဖွင့်ဆိုချက်ကို ပိတ်လိုက်သောကြောင့် အခြား routers များကို နောက်ပိုင်းတွင် လိုအပ်ပါက ကျွန်ုပ်တို့၏ codebase တွင် ဤတစ်ခု၏ လုပ်ဆောင်နိုင်စွမ်း သို့မဟုတ် အပြုအမူကို မထိခိုက်စေဘဲ အခြား router များကို ထပ်ဖြည့်နိုင်မည်ဖြစ်သည်။ .။

8."document.getElementById('root'));" - နောက်ဆုံးတွင်၊ ကျွန်ုပ်တို့သည် DOM သစ်ပင်၏အတွင်း၌ အက်ပ်ကို တပ်ဆင်ရန်/ထုတ်ရန် အက်ပ်ကို မည်သည့်နေရာတွင် အတိအကျဖော်ပြလိုသည်ကို ဖော်ပြသည့် ReactDOM render method အတွက် အကြောင်းပြချက်တစ်ခုအဖြစ် getElementById('root') စာတမ်းတွင် ဖြတ်သန်းသွားသည် (ဤကိစ္စတွင် id=” ပါသည့်ဒြပ်စင်တစ်ခုအတွင်း၌၊ root")။

react-router-dom အထုပ်

React Router သည် React အတွက် ရေပန်းစားသော လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် အပလီကေးရှင်းလမ်းကြောင်းများနှင့် လမ်းညွှန်မှုများကို စီမံခန့်ခွဲရန်အတွက် အစွမ်းထက်၊ အသုံးပြုရလွယ်ကူသော API ကို ပေးဆောင်ပါသည်။ react-router-dom package သည် ဝဘ်အက်ပလီကေးရှင်းများအတွက် React Router ၏တရားဝင်ဗားရှင်းဖြစ်သည်။ အစရှိတဲ့ အစိတ်အပိုင်းတွေကို ထောက်ပံ့ပေးပါတယ်။ နှင့် သင့်အက်ပ်တွင် လမ်းကြောင်းသတ်မှတ်ခြင်းကို စီမံခန့်ခွဲရာတွင် ကူညီရန်။ ၎င်းတွင် သင်၏ အစိတ်အပိုင်းများအတွင်းမှ လက်ရှိလမ်းကြောင်း၏ အချက်အလက်များကို ဝင်ရောက်ကြည့်ရှုရန် useHistory၊ useLocation နှင့် useParams ကဲ့သို့သော ချိတ်များ ပါဝင်သည်။ react-router-dom ဖြင့် URL ကန့်သတ်ချက်များ၊ query strings များ သို့မဟုတ် စိတ်ကြိုက် logic ကိုအခြေခံ၍ dynamic လမ်းကြောင်းများကို အလွယ်တကူ ဖန်တီးနိုင်သည်။ သင့်အပလီကေးရှင်း၏ လမ်းကြောင်းပြဖွဲ့စည်းပုံအပေါ် ပိုမိုအသေးစိတ်ထိန်းချုပ်မှုပေးစွမ်းရန် ဒိုင်းနမစ်အပိုင်းများနှင့်အတူ အသိုက်အမြုံလမ်းကြောင်းများကို ဖန်တီးနိုင်သည်။

react router dom Code နမူနာကို ဒေါင်းလုဒ်လုပ်နည်း

1. React Router Dom ကို ထည့်သွင်းပါ-
သင့်ပရောဂျက်လမ်းညွှန်တွင် React Router Dom ကိုထည့်သွင်းရန် အောက်ပါ command ကို run ပါ။
`npm install react-router-dom`

2. React Router Dom ကို တင်သွင်းပါ-
React Router Dom ကို install လုပ်ပြီးသည်နှင့်၊ အောက်ပါကုဒ်ဖြင့် ၎င်းကို သင့်ပရောဂျက်ထဲသို့ ထည့်သွင်းနိုင်သည်-
`react-router-dom' မှ { BrowserRouter ကို Router၊ Route } အဖြစ် တင်သွင်းပါ

3. လမ်းကြောင်းအစိတ်အပိုင်းတစ်ခု ဖန်တီးပါ-
ထို့နောက်၊ အသုံးပြုသူတစ်ဦး သတ်မှတ်ထားသောလမ်းကြောင်းသို့ သွားရောက်သည့်အခါ စာမျက်နှာကို တင်ဆက်ပေးမည့် လမ်းကြောင်းအစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပါ။ ဥပမာအားဖြင့်၊ သင့်အပလီကေးရှင်းရှိ /home သို့ တစ်စုံတစ်ဦးလာရောက်သည့်အခါ စာမျက်နှာတစ်ခုကို သင်ပြန်ဆိုလိုပါက၊ သင်သည် အောက်ပါကုဒ်ကို အသုံးပြုနိုင်သည်။
``

4. သင့်အက်ပ်အား Router အစိတ်အပိုင်းဖြင့် ခြုံပါ-
နောက်ဆုံးတွင်၊ သင့်လမ်းကြောင်းများအားလုံးကို မှန်ကန်စွာပြန်ဆိုနိုင်ရန် သင့်အက်ပ်ကို router အစိတ်အပိုင်းဖြင့် ခြုံပါ။ သင်၏ root ဖိုင်ရှိ အောက်ပါကုဒ်ကို အသုံးပြု၍ ၎င်းကို ပြုလုပ်နိုင်သည် (များသောအားဖြင့် index.js): ` `.