Redux အက်ပ်လီကေးရှင်းထဲသို့ React Router တပ်ဆင်ခြင်း

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် Redux နှင့် အလုပ်လုပ်ရန် အခြေခံကိရိယာများကို တပ်ဆင်ခဲ့ကြပြီ။ အက်ပ်လီကေးရှင်းတစ်ခုသည် ၎င်း၏ web စာမျက်နှာများအကြား လမ်းညွှန်သွားလာရန် လမ်းကြောင်းညွှန်ကိရိယာ (router) လိုအပ်တတ်ပြီး ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်းသည်လည်း ခြွင်းချက်မဟုတ်ပါ။ ဤအတွက် ကျွန်ုပ်တို့သည် React Router စာကြည့်တိုက်ကို တပ်ဆင်ပါမည်။

ကျွန်ုပ်တို့၏ ပရောဂျက်ကိုဖွင့်ပြီး တာမီနယ်တွင် အောက်ပါ command ကိုရိုက်ထည့်ပါမည်:

terminalnpm install react-router-dom

နည်းနည်းရှေ့ပြေးပြီး ပြောရလျှင်၊ ကျွန်ုပ်တို့၏ Redux အက်ပ်လီကေးရှင်းသည် သမားရိုးကျအားဖြင့် ကုန်ပစ္စည်းများအကြောင်းနှင့် ဆိုင်ပြီး ၎င်းတို့အကြောင်းအချက်အလက်ကို ရောင်းချသူအချို့မှ တင်ပြကြသည်။ ထို့ကြောင့် ယခုအချိန်တွင် ကျွန်ုပ်တို့သည် အဓိကကွန်ပြူနာ App ကို အနည်းငယ်ပြန်ပြင်ပြီး လမ်းကြောင်းညွှန်ခြင်း (routing) လုပ်ဆောင်ချက်ကို အက်ပ်ထဲသို့ ထည့်သွင်းပါမည်။

စတင်ရန် src ဖိုဒါထဲသို့ ဝင်ပြီးနောက် app ထဲသို့ ဝင်ကာ ဤနေရာတွင် root.jsx ဖိုင်ကို ဖန်တီးပါမည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ ဆိုက်၏ အမြစ်ဖြစ်လာမည်: ဘယ်ဘက်တွင် မီနူးနှင့် ညာဘက်တွင် မာတိကာ (လောလောဆယ် ဤနေရာတွင် ခေါင်းစဉ်တစ်ခုသာ ရှိသည်) ရှိမည်:

app/root.jsxfunction Root() {
  return (
    <div id="main">
      <div id="menu">
        <nav>
          <a>ကုန်ပစ္စည်းများ</a>
          <a>ရောင်းချသူများ</a>
        </nav>
      </div>
      <div id="main_page">
        <h2>ဤသည် ကျွန်ုပ်၏ ပထမဆုံး Redux အက်ပ်ဖြစ်သည်!</h2>
        <hr></hr>
      </div>
    </div>
  )
}

export default Root

ကွန်ပြူနာ App ကိုမူ ကျွန်ုပ်တို့ ပြန်ပြင်ပါမည်။ စတင်ရန် ၎င်း၏ အကြောင်းအရာအားလုံးကို အပြီးအပိုင်ဖျက်ပါ။ ထို့နောက် router အတွက် လုပ်ဆောင်ချက်နှစ်ခုနှင့် ကျွန်ုပ်တို့၏ အမြစ်ကွန်ပြူနာ Root ကို import လုပ်ပါ:

App.jsximport { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

import အောက်တွင် router တစ်ခုကို ဖန်တီးပါ၊ ပထမဆုံး လမ်းကြောင်းကို ရေးသားပါ၊ ၎င်းထဲသို့ ကျွန်ုပ်တို့၏ Root ကို ပြသရမည့် အစိတ်အပိုင်းအဖြစ် ပေးပို့ပြီး သင့်လျော်စွာ လမ်းကြောင်းကို '/' အဖြစ် သတ်မှတ်ပါ။ နောက်ပိုင်းတွင် App ထဲသို့ အခြားလိုအပ်သော လမ်းကြောင်းများကိုလည်း ထည့်သွင်းပါမည်:

App.jsxconst router = createBrowserRouter([{ path: '/', element: <Root /> }])

အောက်တွင် App လုပ်ဆောင်ချက်၏ ကုဒ်ကို ရေးသားပါ:

App.jsxfunction App() {
  return <RouterProvider router={router} />
}

export default App

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

နောက်ဆုံးအနေနှင့် အလှတရားအနည်းငယ်ထည့်ရန် index.css တွင် စတိုင်များကို ရေးသားပါမည်:

index.cssbody {
  font-size: 24px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
}

a {
  text-decoration: none;
  color: blue;
  cursor: pointer;
}

#main {
  display: flex;
  margin: 20px;
}

#menu {
  margin-right: 50px;
  padding-top: 50px;
  padding-right: 50px;
  border-right: 2px solid lightgray;
  font-weight: bold;
}