Trasa bez ścieżki w React Router

W tej lekcji rozważymy jeszcze jedną przydatną właściwość trasy bez ścieżki.

Wiesz, że dla każdego obiektu trasy możesz dodać właściwość errorElement i jako wartość ustawić ten element, który chcesz wyświetlać w przypadku wystąpienia błędu.

Ale co, jeśli nasz errorElement będzie taki sam dla wszystkich tras? Można, oczywiście, powklejać to samo dla każdej, albo można skorzystać z trasy bez ścieżki, opakować w nią interesujące nas potomne trasy. Wtedy w przypadku wystąpienia błędu na jednej z nich, nasza trasa bez ścieżki będzie je przechwytywać i wyświetlać swój errorElement.

Wejdźmy do pliku main.jsx i opakujmy w trasę bez ścieżki wszystkie nasze potomne trasy, czyniąc je potomnymi dla niej (ta trasa stanie się z kolei potomna dla głównej), nie zapomnijmy dodać jej również właściwości 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,
					},
				],
			},
		],
	},
]);

Jak teraz sprawdzić działanie tego kodu? Można dodać linijkę z rzuceniem błędu (nie zapomnij jej później usunąć, gdy sprawdzisz). Dodajmy, na przykład, jako pierwszą linię w funkcji action dla trasy usuwania produktu, wtedy przy próbie usunięcia produktu zobaczymy błąd:

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

Teraz spróbuj usunąć jakiś produkt.

Weź aplikację stworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, opakuj Twoje potomne trasy w trasę bez ścieżki z właściwością errorElement i sprawdź, że to działa.