გზის გარეშე მარშრუტი 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 თვისებით და შეამოწმეთ, რომ ეს მუშაობს.