Basic Routing

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

Basic routing မှာ URL path တစ်ခုကို component တစ်ခုနဲ့ချိတ်ပါတယ်။ `/` ကို Home, `/about` ကို About, `/contact` ကို Contact ပြသလိုတဲ့အခါ `Routes` နဲ့ `Route` ကိုသုံးပါတယ်။

jsx

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="/about" element={<h1>About Page</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

Navigation မှာ link နှစ်ခုရှိပြီး route path အလိုက် heading မတူအောင်ပြထားပါတယ်။ `/about` ကိုနှိပ်ရင် About Page component ပေါ်လာပါတယ်။

You should see

Home/About link နှစ်ခုပါပြီး link နှိပ်တိုင်း page refresh မဖြစ်ဘဲ heading ပြောင်းသွားမယ်။

Info

Real project မှာ `element={}` လို component သီးသန့်ခွဲပြီး route ထဲထည့်တာကောင်းပါတယ်။