[리액트 라우터 V6.4] errorElement

이 포스트는 리액트 라우터의 최신 버전인 V6.16을 기준으로 작성되었다. 그러나 V6.4 버전 이후로 크게 변한 사항은 없고, v6.4 버전이 그전의 버전들와 많이 달라졌기 때문에 지금 보고계신 이포스트는 v6.4 이후 버전의 리액트 라우터 라고 생각하면 된다.

이 포스트는 전편과 연결되어 있지만, 전편을 보지 않아도 충분히 이해할 수 있는 내용을 담고 있다.

오류페이지 처리

웹사이트를 개발하면서 특정 에러 페이지를 처리해야 할 상황이 종종 발생한다. 예를 들어, 사용자가 잘못된 URL로 접근했을 때, 존재하지 않는 페이지를 보여주고 홈페이지로 리다이렉트할 수 있어야 한다. 리액트 라우터 v6.4에서는 이를 errorElement로 처리할 수 있다.

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />} errorElement={<ErrorBoundary />}>
      <Route index element={<Index />} />
      <Route path="about" element={<About />}></Route>
      <Route path="products" element={<Products />}>
        <Route index element={<All />} />
        <Route path="men" element={<Men />} />
        <Route path="women" element={<Women />} />
      </Route>
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

맨 외부 레이아웃의 errorElement에는 에러 처리를 위한 컴포넌트를 삽입하면 된다.

간단하게 에러 화면을 구성해봤는데

//ErrorBoundary
import { useNavigate, useRouteError } from "react-router-dom";

function ErrorBoundary() {
  const error = useRouteError();
  const navigate = useNavigate();

  console.error(error);

  function goToHome() {
    navigate("/", { replace: true });
  }

  return (
    <div className="error">
      <h2>Error</h2>
      <p>
        <i>{error.status} </i>
        <i>{error.statusText || error.message}</i>
      </p>
      <button type="button" onClick={goToHome}>
        home
      </button>
    </div>
  );
}

export default ErrorBoundary;

useRouteError는 에러 정보를 반환하고, useNavigate는 페이지 리디렉션을 위한 함수이다.

ErrorBoundary 컴포넌트에서는 error.status와 error.statusText를 화면에 표시한다. 또한 버튼을 클릭하면 홈페이지로 리디렉션된다.