React Router တွင် Router ထည့်ခြင်း

Router အကြောင်း နည်းနည်း မိတ်ဆက်ပြီးနောက်၊ ကျွန်ုပ်တို့သည် ၎င်းတို့ထဲမှ တစ်ခုကို application ထဲသို့ ထည့်နိုင်ပါသည်။

သို့သော် အစပိုင်းတွင် ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့ ဖန်တီးခဲ့သော ကျွန်ုပ်တို့၏ application template အနည်းငယ် ရှင်းလင်းရန် လိုအပ်ပါသည်။ တိတိကျကျဆိုရသော် - src ဖိုလ်ဒါနှင့် လုပ်ဆောင်မည်။ ၎င်းထဲမှ assets ဖိုလ်ဒါကို ပစ်ပါ၊ ဖိုင်များ App.css, App.jsx ကို ပစ်ပါ။ ယေဘုယျအားဖြင့်၊ ၎င်းထဲတွင် main.jsx နှင့် index.css တို့သာ ကျန်ရှိတော့မည်။

index.css ကို ဖွင့်ပြီး အပြည့်အဝ ရှင်းလင်းပါ။ ၎င်းကို ဗလာဖြစ်အောင် ထားလိုက်ပါ။

ယခု ကျွန်ုပ်တို့၏ အဓိက ဖိုင် main.jsx ကို လုပ်ဆောင်မည်။ ၎င်းထဲတွင် ဤကဲ့သို့သော ကုဒ်ရှိလိမ့်မည်:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

ယခု Router ကို ထည့်နိုင်ပါပြီ။ ကျွန်ုပ်တို့သည် BrowserRouter ကို အသုံးပြုမည်၊ အဘယ်ကြောင့်ဆိုသော် ၎င်းကို web applications များတွင် အများဆုံး အသုံးပြုသောကြောင့်ဖြစ်သည်။ ခေတ်မီသော syntax ကိုလည်း မမေ့ပါနှင့်။ import စာကြောင်းကို ထည့်ပါမည်:

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

ထို့နောက်၊ router constant တစ်ခု ဖန်တီးပြီး import စာကြောင်းများနောက်တွင် ကျွန်ုပ်တို့၏ BrowserRouter ကို ဖန်တီးပါမည်။ ၎င်းကို ကျွန်ုပ်တို့၏ အဓိကစာမျက်နှာတွင် 'Hello Router!' ဟူသော စာသားပါသည့် div တစ်ခု ပြသစေရန် လုပ်ဆောင်ပါမည်။ ဤအတွက် အဓိကစာမျက်နှာသို့ လမ်းကြောင်းနှင့် ကျွန်ုပ်တို့ပြသမည့် element ကို ရေးပါမည်:

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

ကျွန်ုပ်တို့သည် RouterProvider component ကို ထည့်ရန်နှင့် အထက်တွင် ဖန်တီးခဲ့သော router ကို ရေးထည့်ရန် လိုအပ်ပါသေးသည်။ ၎င်းသည် router object အားလုံးကို လက်ခံပြီး၊ ကျွန်ုပ်တို့၏ application ကို render လုပ်ကာ အခြား API များကို ချိတ်ဆက်ပေးသည်:

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

ပြည့်စုံသော ကုဒ်သည် ဤကဲ့သို့ ဖြစ်လိမ့်မည်:

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

ပြောင်းလဲမှုများကို သိမ်းပါ။ ဂုဏ်ယူပါတယ်! ကျွန်ုပ်တို့၏ သင်နှင့်အတူ application သည် နောက်ထပ် error မပေးတော့ပါ။ ယခု၊ ကျွန်ုပ်တို့သည် ၎င်းကို စတင်လိုက်ပါက၊ browser ရှိ အဓိကစာမျက်နှာတွင် ကျွန်ုပ်တို့ 'Hello Router!' ကို မြင်ရလိမ့်မည်။

ပေးထားသော content ကို အသုံးပြု၍၊ သင်၏ အဓိကစာမျက်နှာတွင်၊ ယခင်သင်ခန်းစာများအတွက် အိမ်စာများတွင် သင်ဖန်တီးခဲ့သော application ထဲတွင်၊ 'I'm number one in React!' ဟူသော စာသားပါသည့် စာပိုဒ်တစ်ခု ပြသပါစေ။