Маршрут без шляху ў 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 і праверце, што гэта працуе.