Маршрут без пути в React Router

На этом уроке мы рассмотрим еще одно полезное свойство маршрута без пути.

Вы знаете, что для каждого объекта маршрута вы можете добавить свойство errorElement и в качестве значения установить тот элемент, который хотите отображать при возникновении ошибки.

Но что если у нас errorElement будет одинаковым для всех маршрутов? Можно, конечно наляпать одно и тоже для каждого, а можно воспользоваться маршрутом без пути, обернуть в него интересующие нас дочерние маршруты. Toгда в случае возникновения ошибки на одном из них, наш маршрут без пути будет их отлавливать и отображать свой 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 и проверьте, что это работает.