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 속성을 가진 경로 없는 라우트로 감싸고 작동하는지 확인하세요.