React Router에서 Not Found 오류 처리

애플리케이션을 만들 때는 향후 사용 과정에서 발생할 수 있는 다양한 오류에 대비하는 것도 중요합니다. 이번 강의에서는 'Not Found' 오류를 처리하는 방법을 배워보겠습니다. 예를 들어, 사용자가 존재하지 않는 페이지로 연결되는 링크를 클릭했을 때 이런 오류가 발생할 수 있습니다.

먼저, 지난 강의에서 만든 애플리케이션을 열고 Root 컴포넌트의 마크업을 변경해 보겠습니다. 이제 애플리케이션을 실행하면 두 가지 상품 목록이 표시됩니다:

routes/root.jsxfunction Root() {
  return (
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
  );
}

export default Root;

index.css에 약간의 스타일을 추가해 보겠습니다:

index.cssbody {
  font-size: 18px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: blue;
}

이제 링크들을 클릭해 보세요. 우리에게는 상품 페이지 레이아웃이 없기 때문에, 링크를 클릭하면 '404 Not Found' 오류 화면과 React Router가 기본적으로 보여주는 것보다 더 멋지고 재미있는 것을 직접 만들 수 있었을 거라는 질책만 보게 될 것입니다.

404 오류가 발생했을 때 표시될 우리만의 페이지를 만들어 보겠습니다. 이를 위해 src 폴더에 error-page-404.jsx 파일을 생성합니다.

React 컴포넌트 ErrorPage404 내부에서 오류를 포착하기 위해 useRouteError 훅을 사용하고, 콘솔에 출력해 보겠습니다:

error-page-404.jsximport { useRouteError } from 'react-router-dom';

function ErrorPage404() {
  const error = useRouteError();
  console.error(error);

}

export default ErrorPage404;

다음으로, ErrorPage404 컴포넌트의 마크업에서 오류를 알리는 몇 가지 제목을 표시하고 error 객체의 statusText 및 data 속성을 출력할 것입니다 (error 객체와 그 속성들은 애플리케이션에서 링크를 클릭하면서 콘솔을 열어보면 확인할 수도 있습니다).

error-page-404.jsxreturn (
  <div>
    <h1>안녕하세요! 여기는 오류 페이지입니다</h1>
    <h2>404 Not Found 오류</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

main.jsx 파일을 열고 ErrorPage404를 가져오는 import 줄을 추가하는 것을 잊지 마세요:

main.jsximport ErrorPage404 from './error-page-404';

또한 Router 객체에 errorElement 속성을 추가하세요 - 이 요소는 해당 경로에서 오류가 발생했을 때 표시됩니다. 오류 요소의 값은 우리의 ErrorPage404 컴포넌트가 될 것입니다:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
  },
]);