URL Parameters

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

URL parameter ဆိုတာ URL ထဲကပြောင်းလဲနိုင်တဲ့တန်ဖိုးကို route ကဖမ်းယူတာပါ။ ဥပမာ `/products/15` မှာ `15` က product id ဖြစ်နိုင်ပြီး `/users/sai` မှာ `sai` က username ဖြစ်နိုင်ပါတယ်။

jsx

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

function UserProfile() {
  const { userId } = useParams();
  return <h2>User Profile ID: {userId}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Route path မှာ `:userId` လို့ရေးထားလို့ `/users/123` သွားရင် `userId` တန်ဖိုးက `123` ဖြစ်လာပါတယ်။

You should see

`/users/123` URL မှာ `User Profile ID: 123` ဟုပေါ်လာမယ်။

Info

`useParams()` က string value တွေပြန်ပေးပါတယ်။ Number လိုသုံးချင်ရင်လိုအပ်တဲ့နေရာမှာ convert လုပ်ပါ။

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

Route parameter name နဲ့ destructuring name မတူရင် value မရပါ။ `:userId` ဆိုရင် `{ userId }` လို့ယူပါ။