React Router'da Yolsuz Rota

Bu derste, yolsuz rotanın bir başka kullanışlı özelliğini inceleyeceğiz.

Her rota nesnesi için, bir hata oluştuğunda görüntülenecek öğeyi ayarlamak üzere errorElement özelliğini ekleyebileceğinizi biliyorsunuz.

Peki ya errorElement tüm rotalar için aynı olacak? Elbette her biri için aynısını ekleyebilirsiniz, ya da yolsuz bir rota kullanarak, ilgili alt rotaları onun içine alabilirsiniz. O zaman onlardan birinde bir hata oluştuğunda, yolsuz rotamız bu hataları yakalayacak ve kendi errorElement'ini görüntüleyecektir.

main.jsx dosyasına girelim ve tüm alt rotalarımızı yolsuz bir rotanın içine alalım, onları onun alt öğesi yapalım (bu rota da sırayla kök rotanın alt öğesi olacak), ona ayrıca errorElement özelliğini eklemeyi unutmayalım:

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,
					},
				],
			},
		],
	},
]);

Peki bu kodun çalışmasını nasıl kontrol ederiz? Bir hata fırlatma satırı ekleyebilirsiniz (kontrol ettikten sonra kaldırmayı unutmayın). Mesela, ürün silme rotası için olan action fonksiyonunun ilk satırına ekleyelim, o zaman bir ürünü silmeye çalıştığımızda hatayı göreceğiz:

export async function action({ params }) {
	throw new Error('error');
	await deleteProduct(params.productId);
	return redirect('/');
}

Şimdi bir ürünü silmeyi deneyin.

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, alt rotalarınızı errorElement özelliği olan yolsuz bir rotanın içine alın ve bunun çalıştığını kontrol edin.