React Router

ကျတော်တို့ အခုဆိုရင် react ကို styling တွေကိုရောလေ့လာလို့ပြီးသွားပြီဆိုတော့ နောက်ထပ် ကျန်နေသေးတဲ့

အရာလေးတွေကို ဆက်ပြီးတော့ လေ့လာသွားကြရအောင်

အဲဒါက ဘာလည်းဆိုတော့ react router ပါ ပဲ

အဲဒါက ဘာဖြစ်လို့ လိုအပ်တာလည်းဆိုတော့ ကျတော်တို့ရဲ့ react က SPA ဖြစ်တဲ့ အတွက် ကျတော်တို့ ရဲ့

application တစ်ခုက html page တွေများစွာရှိတာမဟုတ်တဲ့အတွက် page တခုနဲ့တခု အကူးအပြောင်း

ကိုလုပ်စေဖို့အတွက် third-party library ဖြစ်တဲ့ react router ကိုအသုံးပြုရပါတယ်

သူက ဘယ်လိုမျိုးအလုပ်လုပ်ပေးတာလည်းဆိုတော့ ကျတော်တို့ web application တခုရဲ့ page တွေက

url ( route ) အပေါ်မူတည်ပြီးတော့ သူက page ( component ) ကို ပြောင်းလဲပေးတာ ပါ

ကျတော်တို့ လေ့လာလိုက်ကြရအောင်

အရင်ဆုံးမလေ့လာခင်မှာ ကျတော်တို့ terminal ကို ဖွင့်ပြီးတော့ ဒီကုဒ်လေးကို run လိုက်ပါမယ်

ဘာလို့လည်းဆိုတော့ ကျတော်ခုနက ပြောခဲ့တဲ့အတိုင်း သူက thrid-party library ဖြစ်တဲ့အတွက်

react မှာ build in ပါလာတာမဟုတ်ပါဘူး အဲအတွက်ကြောင့်သူ့ကို install လုပ်ပေးရမှာပါ

npm i react-router-dom

ဒီလိုလေး run ပြီးသွားရင် ကျတော်တို့ setup လုပ်လိုက်ရအောင်

အရင်ဆုံး ကျတော်တို့ ရဲ့ router ကို setup လုပ်တဲ့အခါမှာ ကျတော်တို့ရဲ့ application တခုလုံးကို သူက

အလုပ်လုပ်စေဖို့အတွက် ကျတော်တို့ application ရဲ့ root node ကနေပြီးတော့ provide လုပ်လိုက်ပါမယ်

ဘယ်လိုမျိုးလုပ်မှာလည်းဆိုတော့ ကျတော်တို့ main.jsx ထဲကိုဝင်ပြီးတော့

ဒီလိုလေး‌ရေးလိုက်ပါမယ်

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

ကျတော်တို့ရဲ့ react ကနေပြီးတော့ သူ့ရဲ့ application မှာရှိတဲ့ url (address) bar ကို ဒီအတိုင်းဆိုရင်မသိပါဘူး

အဲအတွက် ကျတော်တို့ရဲ့ react ကနေပြီးတော့ သိသွားစေဖို့အတွက် BrowserRouter လေးကို

react-router-dom ကနေပြီးတော့ import လုပ်ပြီးတော့ app component တခုလုံးကို အုပ်ပေးလိုက်ပါတယ်

အဲအချိန်မှာ ကျတော်တို့ရဲ့ react application တစ်ခုက url (address) bar ကိုသိပြီးတော့အလုပ်လုပ်သွားပါတယ်

အခုက ကျတော်တို့ ရဲ့ application က url ကိုသိသွားပြီးတော့အလုပ်လုပ်သွားပြီဆိုတော့

ကျတော်တို့ သူ့ကို ဘယ်လိုမျိုး အသုံးပြုရမလဲဆိုတာကို ဆက်လေ့လာသွားကြရအောင်

အရင်ဆုံး ကျတော်တို့ app.jsx ထဲကိုသွားပြီးတော့ ဒီလိုလေး ရေးလိုက်ကြရအောင်

import {Routes , Route} from 'react-router-dom'

အရင်ဆုံး ကျတော်တို့က Routes နဲ့ Route ကို react-router-dom ကနေပြီးတော့ import လုပ်လိုက်ပါမယ်

ဘာလို့ လည်းဆိုတော့ ကျတော်တို့ရဲ့ application တခုက root node တခုကိုပဲ သိပါတယ်

အဲအတိုင်းပါပဲ react-router-dom ကလည်း Routes ဆိုတဲ့ root node တစ်ခုကိုပဲ သိပါတယ်

သူ့ရဲ့အထဲမှာမှ ကျတော်တို့ ပြောင်းလဲသွားစေချင်တဲ့ route တွေ page တွေကို ရေးပေးရပါတယ်

ကျတော်တို့ ကုဒ်လိုက်ကြရအောင်

// rest of code
<Routes>
    <Route path="/" element={<Styling />}></Route>
</Routes>

ဒီကုဒ်လေးတွေကို ကျတော် တချက်ရှင်းပြပေးပါမယ်

အပေါ်မှာပြောထားသလိုပဲ Routes ရဲ့အထဲမှာ Route ကိုရေးပေးရပါတယ် သူ့ရဲ့အထဲမှာ ကျတော်တို့ က

path နဲ့ element ကိုရေးထားတာကိုမြင်ရပါလိမ့်မယ်

Path ဆိုတာက ကျတော်တို့ browser address bar ( url bar) ထဲမှာ ပေးလိုက်တဲ့ route တွေကိုပြောတာပါ

“/” ဆိုတာက ကျတော်တို့ က ဘာ route မှ မရှိတဲ့ နေရာကိုပြောတာပါ အလွယ်ပြောရရင် home pageပေါ့အဲလို

သဘောမျိုး နဲ့ ပြောတာပါ

သူ့ရဲ့အနောက်မှာ ပါတဲ့ element ဆိုတာက အရှေ့ရဲ့ path ဆိုတဲ့ route ကိုရောက်တဲ့အချိန်မှာ render

လုပ်ပေးရမယ့် component ( page ) ကို ထည့်ပေးရပါတယ်

အဲလိုလေး ထည့်ပေးလိုက်တော့ သူက သူ့နဲ့ သက်ဆိုင်တဲ့ route ကိုရောက်တဲ့အခါမှာ ကျတော်တို့ရေးထားတဲ့

page ကို render လုပ်ပေးသွားတာပါ ဒီလောက်ဆိုရင်တော့ တော်တော်လေး နားလည်သွားမယ်လို့ထင်ပါတယ်