Thuta Learning
ရှာဖွေရန်
AdvancedWeb Developmentintermediate

React Router Intro

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

React app တစ်ခုမှာ Home, About, Contact, Dashboard စတဲ့ view များပြောင်းချင်တဲ့အခါ browser page refresh အပြည့်မလုပ်ဘဲ component ပြောင်းပြနိုင်ပါတယ်။ ဒီနည်းကို client-side routing လို့ခေါ်ပြီး React မှာ React Router ကိုအသုံးများပါတယ်။

jsx
# Install React Router in a Vite React project
npm install react-router-dom

ဒီ command က React app ထဲမှာ routing feature အသုံးပြုနိုင်ဖို့ `react-router-dom` package ကိုထည့်ပေးပါတယ်။

You should see
Project ထဲမှာ `BrowserRouter`, `Routes`, `Route`, `Link`, `useParams` စတာတွေ import လုပ်သုံးနိုင်မယ်။

Info

Install ပြီးရင် app ကို restart လုပ်ဖို့လိုနိုင်ပါတယ်။ Terminal server ကို stop လုပ်ပြီး `npm run dev` ပြန် run ပါ။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • Package မထည့်ဘဲ import လုပ်မိရင် `Module not found` error ပေါ်ပါလိမ့်မယ်။
React Router Intro | Thuta Learning