[React.js] useRouterError 훅 (React Router)

useRouterError 훅

들어가며

• 리액트 라우터(React Router)의 @useRouterError@ 훅에 대해 정리해본다.

 

useRouterError 훅

개념

• 리액트 라우터 라이브러리(@react-router-dom@)에서 제공하는 훅
• 라우트 처리 중 발생한 에러를 잡아서 처리하는 데 사용된다.
• 주로 오류 경계(Error Boundary)와 함께 사용되어, 라우트 내에서 발생하는 오류를 처리하고 사용자에게 적절한 피드백을 제공하는데 사용된다.

 

주요 기능

• 오류 감지: 라우트 컴포넌트에서 발생하는 오류를 감지할 수 있다.
• 에러 핸들링: 감지된 오류를 사용자 정의 에러 메시지나 컴포넌트로 렌더링할 수 있다.
• 오류 정보 제공: 오류 객체를 반환하여 오류 메시지, 스택 트레이스 등을 활용할 수 있다.

 

사용 예제

예제 1

• 발생한 오류를 가져오고, 사용자에게 오류 메시지를 표시한다.

import React from 'react';
import { useRouteError } from 'react-router-dom';

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

  return (
    <div>
      <h1>Something went wrong!</h1>
      <p>{error.message}</p>
    </div>
  );
}

export default ErrorBoundary;

 

예제 2

• @ErrorBoundary@ 컴포넌트를 라우트 설정에 추가하여, 잘못된 경로로 접근하거나 라우트 컴포넌트에서 발생한 오류를 처리한다.
• @ErrorBoundary@ 컴포넌트는 라우트 설정의 최상단에 배치되어야 하며, 특정 경로에 한정된 오류 처리가 필요하다면 해당 경로의 하위 컴포넌트에서 사용될 수 있다.

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="*" element={<ErrorBoundary />} />
      </Routes>
    </Router>
  );
}

export default App;

 

예제 3

• @error@의 @status@ 값에 따라 다른 내용이 에러 메시지로 출력되도록 할 수 있다.

import { useRouteError } from "react-router-dom";

import PageContent from "../components/PageContent";
import MainNavigation from "../components/MainNavigation";

function ErrorPage() {
  const error = useRouteError();

  let title = "An error occurred!";
  let message = "Something went wrong!";

  if (error.status === 500) {
    message = JSON.parse(error.data).message;
  }

  if (error.status === 404) {
    title = "Not Found!";
    message = "Could not find resource or page.";
  }

  return (
    <>
      <MainNavigation />
      <PageContent title={title}>
        <p>{message}</p>
      </PageContent>
    </>
  );
}

export default ErrorPage;

 

• @createBrowserRouter@를 사용하여 라우트를 설정할 경우, @errorElement@ prop을 설정한 후, @ErrorBoundary@ 컴포넌트를 해당 prop의 값으로 설정해준다.
• 그리고 @errorElement@ prop은 최상위 경로(@/@)에서만 설정해준다.

import { RouterProvider, createBrowserRouter } from "react-router-dom";

import HomePage from "./pages/Home";
import EventsPage, { loader as eventsLoader } from "./pages/Events";
import EventDetailPage from "./pages/EventDetail";
import NewEventPage from "./pages/NewEvent";
import EditEventPage from "./pages/EditEvent";
import RootLayout from "./pages/Root";
import EventsRootLayout from "./pages/EventsRoot";
import ErrorPage from "./pages/Error";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <HomePage /> }, // path: ""
      {
        path: "events",
        element: <EventsRootLayout />,
        children: [
          {
            index: true, // path: ""
            element: <EventsPage />,
            loader: eventsLoader,
          },
          { path: ":eventId", element: <EventDetailPage /> },
          { path: "new", element: <NewEventPage /> },
          { path: ":eventId/edit", element: <EditEventPage /> },
        ],
      },
    ],
  },
]);

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

export default App;

 

참고 사이트

useRouteError v6.24.1 | React Router