404 처리하기

기본 라우트를 처리하는 방법을 배웠으니, 이제 React Router를 사용해 404를 처리하는 방법을 살펴보겠습니다. 404는 사용자가 명시적으로 처리하지 않은 URL로 이동했을 때 발생합니다. 이런 경우 사용자에게 도움이 되는 안내를 보여주고 싶습니다.

컴포넌트 생성하기

이 기능을 처리할 컴포넌트를 만들어 보겠습니다.

src/containers/NotFound.tsx에 새로운 컴포넌트를 생성하고 다음 코드를 추가합니다.

import "./NotFound.css";

export default function NotFound() {
  return (
    <div className="NotFound text-center">
      <h3>죄송합니다, 페이지를 찾을 수 없습니다!</h3>
    </div>
  );
}

이 컴포넌트는 단순히 메시지를 출력하는 역할을 합니다.

src/containers/NotFound.css에 몇 가지 스타일을 추가해 보겠습니다.

.NotFound {
  padding-top: 100px;
}

모든 라우트를 처리하는 Catch All 라우트 추가하기

이제 404 오류를 처리하기 위해 이 컴포넌트를 라우트에 추가해야 합니다.

src/Routes.tsx에서 <Routes> 블록을 찾고, 해당 섹션의 마지막 줄에 다음을 추가하세요.

{/* 마지막으로, 모든 매칭되지 않는 라우트를 처리합니다 */}
<Route path="*" element={<NotFound />} />;

이 라우트는 항상 <Routes> 블록의 마지막에 위치해야 합니다. 이 라우트는 앞선 모든 라우트가 실패한 경우 요청을 처리하는 역할을 한다고 생각하면 됩니다.

그리고 헤더에 NotFound 컴포넌트를 포함시키기 위해 다음을 추가하세요:

import NotFound from "./containers/NotFound.tsx";

이제 끝났습니다! 브라우저로 이동해 Nav의 Login 또는 Signup 버튼을 클릭하면 우리가 설정한 404 메시지를 볼 수 있습니다.

다음으로, 사용자가 앱에 로그인하고 회원가입할 수 있도록 기능을 추가할 예정입니다!