Маршрут без път в 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 и проверете, че това работи.