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('error');
	await deleteProduct(params.productId);
	return redirect('/');
}

Այժմ փորձեք ջնջել ինչ-որ ապրանք:

Վերցրեք ձեր ստեղծած հավելվածը նախորդ դասերի առաջադրանքներից: Օգտագործելով դասի նյութերը, փաթաթեք ձեր դուստր երթուղիները ուղի չունեցող երթուղու մեջ errorElement հատկությամբ և ստուգեք, որ դա աշխատում է: