React Router හි පථයක් නොමැති මාර්ගය

මෙම පාඩමේදී, අපි පථයක් නොමැති මාර්ගයේ තවත් ප්‍රයෝජනවත් ගුණාංගයක් සලකා බලමු.

ඔබ දන්නවා සෑම මාර්ග වස්තුවකටම ඔබට errorElement ගුණය එකතු කළ හැකි බව සහ අගයක් ලෙස දෝෂයක් සිදු වූ විට දර්ශනය කිරීමට අවශ්‍ය මූලද්‍රව්‍යය සැකසිය හැකි බව.

නමුත් අපගේ සියලුම මාර්ග සඳහා errorElement එක හා සමාන නම් කුමක් කළ යුතුද? ඇත්තෙන්ම, සෑම එකකටම එකම දේ යෙදිය හැකිය, නැතිනම් පථයක් නොමැති මාර්ගයක් භාවිතා කර, එයින් අපට අවශ්‍ය උප මාර්ග වලට ආවරණය කළ හැකිය. එවිට ඒවායින් එකක දෝෂයක් සිදු වුවහොත්, අපගේ පථයක් නොමැති මාර්ගය ඒවා අල්ලා ගනිමින් එහි errorElement දර්ශනය කරයි.

අපි main.jsx ගොනුවට ගොස් අපගේ සියලුම උප මාර්ග, පථයක් නොමැති මාර්ගයකින් ආවරණය කරමු (මේ සමඟම මෙම මාර්ගය මුල් මාර්ගයේ උප මාර්ගයක් බවට පත්වේ), එයට 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,
					},
				],
			},
		],
	},
]);

දැන් මෙම කේතයේ ක්‍රියාකාරිත්වය පරීක්ෂා කරන්නේ කෙසේද? දෝෂයක් විසි කිරීමේ පේළියක් එකතු කළ හැකිය (පරීක්ෂා කිරීමෙන් පසු එය ඉවත් කිරීමට අමතක නොකරන්න). උදාහරණයක් ලෙස, අපි එය භාණ්ඩය මකා දැමීමේ මාර්ගය සඳහා වූ action ශ්‍රිතයේ පළමු පේළියට එකතු කරමු, එවිට භාණ්ඩයක් මකා දැමීමට උත්සාහ කරන විට අපට දෝෂය දිස්වේ:

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

දැන් යම් භාණ්ඩයක් මකා දැමීමට උත්සාහ කරන්න.

පෙර පාඩම්වල කාර්යයන් සඳහා ඔබ සාදන ලද යෙදුම ගන්න. පාඩමේ ද්‍රව්‍ය භාවිතා කරමින්, ඔබගේ උප මාර්ග පථයක් නොමැති මාර්ගයකින් ආවරණය කර errorElement ගුණය එකතු කර එය ක්‍රියාත්මක වන බව පරීක්ෂා කරන්න.