Contextual Errors

재미삼아 destroy action에서 오류를 발생시켜보자.

// 📄src/routes/destroy.jsx

export async function action({ params }) {
  throw new Error("oh dang!");
  await deleteContact(params.contactId);
  return redirect("/");
}

예전에 만든 errorElement 이다.

새로고침 외에는 할 수 있는게 페이지 내에 없다.

destroy route에 contextual error message를 만들어보자.

// 📄src/main.jsx

[
  /* other routes */
  {
    path: "contacts/:contactId/destroy",
    action: destroyAction,
    errorElement: <div>Oops! There was an error.</div>,
  },
];

에러가 나와도 페이지의 나머지 부분과 계속 상호작용 할 수 있다.

에러가 가장 가까운 errorElement 까지 버블링 된다는 것을 알 수 있다.

출처 : 리액트 라우터 공식 홈페이지➡️