프로필 페이지 만들기 (10) - 404 페이지 만들기

 

이번 포스트에서는 사용자가 설정하지 않은 경로(url)에 접근할 때 NotFoundPage 컴포넌트를 출력하고자 한다.

 

우선, 설정하지 않은 경로에 접근시 404에러가 발생하게 된다는 점을 알아두자

 

이전에 작성한 Router.tsx에서 path를 '*'를 추가하여 설정한 경로 이외의 접근시 404 에러 페이지 컴포넌트를 출력하고자 한다.

 

  const router = createBrowserRouter([
    {
      element: <Layout />,
      children: [
        {
          index: true,
          element: <Navigate to={HOME} replace />,
        },
        // ...
        {
          path: '*',
          element: <NotFoundPage />,
        },
      ],
    },
  ]);

 

404 에러 페이지에 대한 마크업은 단순하게 하였다

 

useNavigate를 사용하여 (-1)를 넘겨서 이전 페이지로 돌아가게 하였다