React Router တွင် Not Found အမှားကို ကိုင်တွယ်ခြင်း

အက်ပ်တစ်ခု ဖန်တီးသည့်အခါ ၎င်း၏နောက်ပိုင်းအသုံးပြုမှုလုပ်ငန်းစဉ်အတွင်း ပေါ်ပေါက်လာမည့် အမျိုးမျိုးသော အမှားများကိုလည်း ဂရုပြုရန် လိုအပ်ပါသည်။ ဤသင်ခန်းစာတွင် အမှား 'Not Found' နှင့် အလုပ်လုပ်ရန် သင်ယူရမည်။ ထိုကဲ့သို့သော အမှားသည် ဥပမာအားဖြင့် အသုံးပြုသူသည် မရှိသောစာမျက်နှာသို့ ဦးတည်သော လင့်ခ်တစ်ခုကို နှိပ်မိပါက ပေါ်လာနိုင်ပါသည်။

စတင်ရန် ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့လုပ်ခဲ့သော ကျွန်ုပ်တို့၏အက်ပ်ကို ဖွင့်ပြီး Root component ၏ markup ကို အစားထိုးကြပါစို့။ ယခု အက်ပ်ကို စတင်သည့်အခါ ထုတ်ကုန်နှစ်ခုပါသော စာရင်းတစ်ခုကို ကျွန်ုပ်တို့မြင်ရမည် -

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
	);
}

export default Root;

index.css ထဲတွင် style အနည်းငယ်ထည့်ကြပါစို့ -

body {
	font-size: 18px;
	line-height: 1.5;
}

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

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

ယခု လင့်ခ်များကို နှိပ်ကြည့်ပါ။ ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအတွက် စာမျက်နှာများ၏ layout များ မရှိသောကြောင့် လင့်ခ်များသည် ကျွန်ုပ်တို့ကို အမှား '404 Not Found' ဖန်သားပြင်နှင့် React Router က ကျွန်ုပ်တို့အား ပုံသေထုတ်ပြသည်ထက် ပိုမိုလှပစိတ်ဝင်စားဖွယ် တစ်ခုခုကို ကျွန်ုပ်တို့ကိုယ်တိုင် စဉ်းစားနိုင်မည်ဟူသော ပြစ်တင်မှုသို့သာ ခေါ်ဆောင်သွားမည် ဖြစ်ပါသည်။

အမှား 404 ပေါ်လာသည့်အခါ မြင်ရမည့် ကျွန်ုပ်တို့ကိုယ်ပိုင် စာမျက်နှာတစ်ခု ဖန်တီးကြပါစို့။ ဤအတွက် src ဖိုဒါထဲတွင် ဖိုင်လေးတစ်ခု error-page-404.jsx ကို ဖန်တီးကြပါမည်။

React component ErrorPage404 အတွင်း၌ ကျွန်ုပ်တို့သည် console တွင် ထုတ်ပြမည့် အမှားကို ဖမ်းယူရန် hook useRouteError ကို အသုံးပြုမည် -

import { useRouteError } from 'react-router-dom';

function ErrorPage404() {
	const error = useRouteError();
	console.error(error);

}

export default ErrorPage404;

ထို့နောက် component ErrorPage404 ၏ markup တွင် အမှားအကြောင်း အသိပေးသည့် ခေါင်းစဉ်နှစ်ခုကို ပြသပြီး object error ၏ properties များဖြစ်သော statusText နှင့် data ကို ထုတ်ပြမည် (object error နှင့် ၎င်း၏ properties များကို console ကိုဖွင့်ပြီး အက်ပ်ထဲရှိ ကျွန်ုပ်တို့၏ လင့်ခ်များကို နှိပ်လိုက်ပါက သင်မြင်တွေ့နိုင်ပါသည်)။

return (
	<div>
		<h1>မင်္ဂလာပါ! ဒါကအမှားစာမျက်နှာပါ</h1>
		<h2>404 Not Found အမှား</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

main.jsx ဖိုင်ကို ဖွင့်ပြီး ErrorPage404 နှင့် တစ်ကြောင်းထပ်တိုး import လုပ်ရန် မမေ့ပါနှင့် -

import ErrorPage404 from './error-page-404';

ထို့အပြင် object Router ထဲတွင် property အသစ်တစ်ခု errorElement ကိုလည်း ထည့်ပါ - ဤ element သည် ဤ route တွင် အမှားတစ်ခု ဖြစ်ပေါ်လာသည့်အခါ ပြသပါသည်။ အမှား element ၏ တန်ဖိုးသည် ကျွန်ုပ်တို့၏ component ErrorPage404 ဖြစ်မည် -

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
	},
]);

ယခင်သင်ခန်းစာအတွက် တာဝန်တွင် သင်ဖန်တီးခဲ့သော အက်ပ်ကို ယူပါ။ သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း အိမ်စာမျက်နှာတွင် လင့်ခ်အနည်းငယ်ပါသော စာရင်းတစ်ခုကို ထည့်ပါ။ href လင့်ခ်များ၏ တန်ဖိုးများက - /students/1 နှင့် /students/2 ဖြစ်ပြီး လင့်ခ်များ၏ စာသားများမှာ သက်ဆိုင်ရာအားဖြင့် 'Student1' နှင့် 'Student2' ဖြစ်ပါစေ။ လင့်ခ်များကို နှိပ်သည့်အခါ React Router က ပုံသေထုတ်ပြသော အမှားဖန်သားပြင်ပေါ်လာကြောင်း သေချာပါစေ။

ယခု ကိုယ်ပိုင် အမှား 404 စာမျက်နှာကို ဖန်တီးပါ၊ သင်ပြလိုသည်များကို ၎င်းပေါ်တွင် ထုတ်ပြနိုင်ပါသည်။ သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း ၎င်းကို ချိတ်ဆက်ပါ။ ယခု လင့်ခ်များကို နှိပ်သည့်အခါ သင်သည် ၎င်းပေါ်သို့သာ ရောက်ရှိကြောင်း သေချာပါစေ။