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

npm react router dom နှင့်ပတ်သက်သော အဓိကပြဿနာမှာ debug နှင့် ပြဿနာဖြေရှင်းရန် ခက်ခဲနိုင်သည်။ အဘယ်ကြောင့်ဆိုသော် စာကြည့်တိုက်သည် အမှားအယွင်းတစ်ခုဖြစ်ပွားသည့်အခါ ဖြစ်ပျက်နေသည့်အသေးစိတ်အချက်အလက်များကို အများအပြားမဖော်ပြထားသောကြောင့် ပြဿနာဖြစ်ရသည့်အကြောင်းရင်းကို တိတိကျကျဖော်ထုတ်ရန်ခက်ခဲသောကြောင့်ဖြစ်သည်။ ထို့အပြင်၊ ဒစ်ဂျစ်တိုက်သည် အဆက်မပြတ်ပြောင်းလဲနေသောကြောင့်၊ အပြောင်းအလဲများအားလုံးကို လိုက်လျောညီထွေရှိရန် ခက်ခဲနိုင်ပြီး သင်၏ codebase သည် ၎င်းတို့နှင့် သဟဇာတဖြစ်ကြောင်း သေချာစေပါသည်။

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

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

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

2. “const App = () => (” – ဤစာကြောင်းသည် မြှားလုပ်ဆောင်ချက်ကို သတ်မှတ်ပေးထားသည့် အဆက်မပြတ်အမည်ရှိ အက်ပ်တစ်ခုကို ကြေညာသည်။

3 ။ "” – ဤစာကြောင်းသည် Router အစိတ်အပိုင်းကို react-router-dom စာကြည့်တိုက်မှ ပြန်ဆိုသည်။

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

5 ။ "” – ဤစာကြောင်းသည် လမ်းကြောင်း '/about' နှင့် About အစိတ်အပိုင်းကို ၎င်း၏ကလေးအစိတ်အပိုင်းအဖြစ် လမ်းကြောင်းတစ်ခုဖြင့် ပြန်ဆိုသည်။

6. “” – ဤအက်ပ်လုပ်ဆောင်ချက် ကြေငြာချက်တွင် အခြားအစိတ်အပိုင်းများအားလုံးသည် ၎င်း၏ကလေးများဖြစ်ကြောင်း ညွှန်ပြသော Router tag ကိုပိတ်စေသည်။

npm ဆိုတာဘာလဲ I react router dom

React Router DOM သည် React အတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် router-enabled application တစ်ခုဖန်တီးရန် လိုအပ်သော core components များဖြစ်သည့် အစိတ်အပိုင်းများအပါအဝင်၊ , နှင့် . ၎င်းသည် လမ်းကြောင်းများအကြား သွားလာခြင်းနှင့် လမ်းကြောင်းဘောင်များကို ဝင်ရောက်ခြင်းကဲ့သို့သော developer များအား router နှင့် ပရိုဂရမ်ကျကျ အပြန်အလှန်အပြန်အလှန်လုပ်ဆောင်နိုင်စေမည့် ချိတ်များနှင့် လုပ်ဆောင်ချက်များကို ပံ့ပိုးပေးပါသည်။ NPM သည် developer များအား ၎င်းတို့၏ ပရောဂျက်များအတွက် ပြင်ပကုမ္ပဏီ ပက်ကေ့ဂျ်များကို အလွယ်တကူ ထည့်သွင်းပြီး စီမံခန့်ခွဲနိုင်စေသော JavaScript အတွက် ပက်ကေ့ဂျ်မန်နေဂျာတစ်ခုဖြစ်သည်။ NPM ကိုအသုံးပြုခြင်းဖြင့်၊ developer များသည် တရားဝင်ဝဘ်ဆိုဒ်မှ ကိုယ်တိုင်ဒေါင်းလုဒ်လုပ်စရာမလိုဘဲ ၎င်းတို့၏ပရောဂျက်သို့ React Router DOM ကို လျင်မြန်စွာ ထည့်သွင်းနိုင်သည်။

react router dom ကို ဘယ်လို install လုပ်ရမလဲ

React Router Dom ကို ထည့်သွင်းခြင်းသည် လွယ်ကူပြီး ရိုးရှင်းပါသည်။ ပထမဦးစွာ၊ အောက်ပါ command ကို အသုံးပြု၍ npm မှ react-router-dom package ကို ထည့်သွင်းရန် လိုအပ်သည်-

`npm install react-router-dom`

ထည့်သွင်းပြီးသည်နှင့် သင်၏ React အစိတ်အပိုင်းများရှိ အထုပ်များမှ သင်လိုအပ်သော အစိတ်အပိုင်းများကို တင်သွင်းနိုင်သည်။ ဥပမာအားဖြင့်၊ သင်သည် BrowserRouter အစိတ်အပိုင်းကို အသုံးပြုလိုပါက၊

`react-router-dom'` မှ { BrowserRouter } ကို တင်သွင်းပါ။

ထို့နောက် ဤကဲ့သို့သော သင့်အစိတ်အပိုင်းတွင် ၎င်းကို သင်အသုံးပြုနိုင်သည်-
“`jsx
// မင်းရဲ့ လမ်းကြောင်းတွေက ဒီကိုသွား ``

react dom သည် react router dom နှင့် အတူတူပင်

မဟုတ်ပါ၊ React Router DOM သည် React DOM နှင့်မတူပါ။ React Router DOM သည် React ဖြင့် တည်ဆောက်ထားသော အပလီကေးရှင်းများအတွက် လမ်းကြောင်းနှင့် လမ်းညွှန်မှုများကို ပံ့ပိုးပေးသည့် စာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် ဆော့ဖ်ဝဲအင်ဂျင်နီယာများအား လမ်းကြောင်းများဖန်တီးရန်နှင့် အစိတ်အပိုင်းများကို ချိတ်ဆက်နိုင်စေကာ အသုံးပြုသူများအား အပလီကေးရှင်းတစ်ခုရှိ မတူညီသောစာမျက်နှာများကြားတွင် သွားလာနိုင်စေမည်ဖြစ်သည်။ အခြားတစ်ဖက်တွင်၊ React DOM သည် browser ၏ Document Object Model (DOM) ကို ကိုင်တွယ်ရန် API ကို ပံ့ပိုးပေးသည့် စာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် စာမျက်နှာပေါ်ရှိ HTML အစိတ်အပိုင်းများကို ဖန်တီးခြင်းနှင့် အပ်ဒိတ်လုပ်ခြင်းတို့ကို ပြုလုပ်နိုင်သည့်အပြင် ကလစ် သို့မဟုတ် ဖောင်တင်ပြမှုများကဲ့သို့သော ဖြစ်ရပ်များကို ကိုင်တွယ်နိုင်စေပါသည်။

တုံ့ပြန်မှုအတွက် ဘယ် router က အကောင်းဆုံးလဲ။

React အတွက် အကောင်းဆုံး router သည် React Router ဖြစ်သည်။ ၎င်းသည် React အပလီကေးရှင်းများအတွက် ရေပန်းစားသောလမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်ပြီး dynamic route matching၊ တည်နေရာအကူးအပြောင်းကိုင်တွယ်ခြင်းနှင့် URL ထုတ်လုပ်မှုစသည့် အင်္ဂါရပ်များကို ပံ့ပိုးပေးပါသည်။ ၎င်းသည် server-side rendering ကိုလည်း ပံ့ပိုးပေးသည်၊ ၎င်းသည် သင်၏ application ကို client သို့မပို့မီ server တွင် render လုပ်ခွင့်ပေးသည်။ ၎င်းသည် ရှာဖွေရေးအင်ဂျင်များဖြင့် ရှာဖွေနိုင်သည့် SEO-ဖော်ရွေသော အပလီကေးရှင်းများကို ဖန်တီးရန် ပိုမိုလွယ်ကူစေသည်။