잘못된 경로로 진입했을 때 오류 처리하는 방식 (라우팅 중 발생하는 Notfound 오류)

✨잘못된 경로로 진입했을 때 오류 처리하는 방식

route path="*"를 사용하는 방식과 errorElement를 사용하는 방식이 있다.

📘 1. route path=”*”

• 모든 경로에 대해 일반적인 경로를 정의할 때 사용
• /*때문에 모든 경우와 일치
• 주로 경로가 잘못되었을 때 Notfound 오류를 처리하기 위해 사용
• 잘못된 경로일 때 default page로 이동하는 것뿐 notfound 오류를 의미하는 것은 아님!

※ 주의사항

path="*" 코드는 가장 하단에 위치해야함!
코드 위에 아래로 내려가면서 일치하는 경로를 찾기때문에, path="*" 코드가 상단에 위치하게 된다면, path="*" 코드 아래 일치하는 경로가 있더라도 path="*" 코드가 실행되어, 오류 페이지로 이동하게 된다.

• /login로 진입하더라도 path="*"인 코드를 먼저 실행시키기때문에, <RouteError />컴포넌트가 렌더링된다.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<GeneralLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/books" element={<BookList />} />
          <Route path="*" element={<RouteError />} />
          <Route path="/login" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

💻사용 예시

• Route의 path를 *로 설정하고, 경로가 잘못되었을 때 보여줄 컴포넌트 지정

import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<GeneralLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/books" element={<BookList />} />
          <Route path="/books/:id" element={<BookDetail />} />
          <Route path="/login" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="*" element={<RouteError />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

💻사용 예시 2

const router = [
  { path: "/", element: <Home /> },
  { path: "/books", element: <BookList /> },
  { path: "/books/:id", element: <BookDetail /> },
  { path: "/login", element: <SignIn /> },
  { path: "/sign", element: <SignUp /> },
  { path: "*", element: <RouteError /> }
];

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<GeneralLayout />}>
          {router.map((route) => (
            <Route path={route.path} element={route.element} key={route.path} />
          ))}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

📘 2. errorElement

• react-router 공식문서_errorElement
• 특정 경로에 대한 오류를 처리하기 위해 사용
• 404, 401, 403 등 오류를 구체적으로 잡아낼 수 있고, 각각 다른 처리를 할 수 있음
• useRouteError를 사용하여 React Router가 제공하는 오류메세지, 오류 스택을 받을 수 있음

💻사용 예시 1

• createBrowserRouter로 경로들의 정보를 작성
• RouterProvider를 사용해서 router를 등록

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

const router = createBrowserRouter([
  { path: "/", element: <Home />, errorElement: <RouteError /> },
  { path: "/books", element: <BookList /> },
  { path: "/books/:id", element: <BookDetail /> },
  { path: "/login", element: <SignIn /> },
  { path: "/sign", element: <SignUp /> }
]);

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

💻사용 예시 2

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<GeneralLayout />}>
          <Route path="/" element={<Home />} errorElement={<RouteError />} />
          <Route path="/books" element={<BookList />} />
          <Route path="/books/:id" element={<BookDetail />} />
          <Route path="/login" element={<SignIn />} />
          <Route path="/signup" element={<SignUp />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

💻사용 예시 3

• 모든 element에 동일한 Layout을 적용할 때

const routerData = [
  { path: "/", element: <Home />, errorElement: <RouteError /> },
  { path: "/books", element: <BookList /> },
  { path: "/books/:id", element: <BookDetail /> },
  { path: "/login", element: <SignIn /> },
  { path: "/sign", element: <SignUp /> }
];

const router = createBrowserRouter(
  routerData.map((route) => ({
    path: route.path,
    element: <GeneralLayout>{route.element}</GeneralLayout>,
    errorElement: route.errorElement
  }))
);

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

💻사용 예시 - useRouteError

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

interface RouteErrorProps {
  statusText?: string;
  message?: string;
}

const RouteError = () => {
  const error = useRouteError() as RouteErrorProps;
  return (
    <div>
      <h1>오류가 발생했습니다.</h1>
      <p>다음과 같은 오류가 발생했습니다.</p>
      <p>{error.statusText || error.message}</p>
    </div>
  );
};

✨정리

route path="/*"

모든 경로에 대한 오류 페이지를 지정할 때 사용한다. 잘못된 경로로 진입하면 notfound 페이지로 이동시킬뿐, 오류를 처리하는 것은 아니다.

errorElement

잘못된 경로로 진입했을 때 오류를 처리할 때 사용한다. useRouterError를 사용해서 구체적인 오류의 내역을 확인할 수 있다.