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