React Router တွင် လမ်းကြောင်းမရှိသော Route

ဤသင်ခန်းစာတွင် လမ်းကြောင်းမရှိသော Route ၏ နောက်ထပ်အသုံးဝင်သော ဂုဏ်သတ္တိတစ်ခုကို လေ့လာကြည့်ပါမည်။

Route ဆိုင်ရာ အရာဝတ္ထုတစ်ခုစီအတွက် errorElement ဂုဏ်သတ္တိကို ထည့်သွင်းနိုင်ပြီး အမှားတစ်ခုဖြစ်ပေါ်သည့်အခါ ပြသလိုသော element ကို တန်ဖိုးအဖြစ် သတ်မှတ်နိုင်ကြောင်း သင်သိပြီးဖြစ်သည်။

သို့သော် Route အားလုံးအတွက် errorElement အတူတူဖြစ်နေပါက ဘာလုပ်ရမည်နည်း။ တစ်ခုစီအတွက် အတူတူပဲ ထပ်ခါထပ်ခါရေးနိုင်သည်၊ သို့မဟုတ် လမ်းကြောင်းမရှိသော Route ကိုအသုံးပြု၍ ကျွန်ုပ်တို့စိတ်ဝင်စားသော child route များကို ထည့်သွင်းပတ်ရံနိုင်သည်။ ထိုသို့ဆိုလျှင် ၎င်းတို့ထဲမှ တစ်ခုတွင် အမှားဖြစ်ပေါ်ပါက ကျွန်ုပ်တို့၏ လမ်းကြောင်းမရှိသော Route က ၎င်းတို့ကို ဖမ်းယူပြီး ၎င်း၏ errorElement ကို ပြသပေးမည်ဖြစ်သည်။

main.jsx ဖိုင်ထဲသို့ဝင်၍ ကျွန်ုပ်တို့၏ child route အားလုံးကို လမ်းကြောင်းမရှိသော Route တစ်ခုဖြင့် ပတ်ရံလိုက်ပါ (ထိုသို့ဆိုလျှင် ၎င်း Route သည် root route ၏ child တစ်ခုဖြစ်လာမည်)၊ ၎င်းအတွက် errorElement ဂုဏ်သတ္တိကိုလည်း ထည့်သွင်းရန် မေ့မထားပါနှင့်။

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		action: rootAction,
		children: [
			{
				errorElement: <ErrorPage404 />,
				children: [
					{ index: true, element: <Index /> },
					{
						path: 'products/:productId',
						element: <Product />,
						loader: productLoader,
					},
					{
						path: 'products/:productId/edit',
						element: <EditProduct />,
						loader: editProductLoader,
						action: editAction,
					},
					{
						path: 'products/:productId/delete',
						action: deleteAction,
					},
				],
			},
		],
	},
]);

ယခုဤကုဒ်၏အလုပ်လုပ်ပုံကို မည်သို့စစ်ဆေးမည်နည်း။ အမှားပြန်ပစ်သည့် စာကြောင်းတစ်ကြောင်းထည့်သွင်း၍ စစ်ဆေးနိုင်သည် (စစ်ဆေးပြီးသည့်အခါ ဖျက်ရန်မေ့မထားပါနှင့်)။ ဥပမာအားဖြင့်၊ ထိုစာကြောင်းကို ထုတ်ကုန်ဖျက်သိမ်းရန် Route ၏ action function ထဲတွင် ပထမဆုံးစာကြောင်းအဖြစ် ထည့်လိုက်ပါ၊ ထိုအခါ ထုတ်ကုန်တစ်ခုကိုဖျက်သိမ်းရန် ကြိုးစားသည့်အခါ အမှားတစ်ခုကို မြင်တွေ့ရမည်။

export async function action({ params }) {
	throw new Error('error');
	await deleteProduct(params.productId);
	return redirect('/');
}

ယခု ထုတ်ကုန်တစ်ခုခုကို ဖျက်သိမ်းကြည့်ပါ။

ယခင်သင်ခန်းစာများအတွက် လုပ်ဆောင်ချက်များတွင် သင်ဖန်တီးခဲ့သော application ကို ယူပါ။ ဤသင်ခန်းစာ၏ပစ္စည်းများကို အသုံးပြု၍ သင်၏ child route များကို errorElement ဂုဏ်သတ္တိပါရှိသော လမ်းကြောင်းမရှိသည့် Route တစ်ခုဖြင့် ပတ်ရံပြီး ၎င်းအလုပ်လုပ်ကြောင်း စစ်ဆေးပါ။