Рута без патека во 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 и проверете дека тоа функционира.