React) ErrorElement 처리 방법 ... createBrowserRouter 이용

import {
  createBrowserRouter,
  RouterProvider,
  // Navigate,
} from "react-router-dom";
import Home from "./screens/Home";
import About from "./screens/About";
import Root from "./Root";
import NotFound from "./screens/NotFound";
import ErrorComponent from "./components/ErrorComponent";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
        errorElement: <ErrorComponent />,
      },
    ],
    errorElement: <NotFound />,
    // errorElement: <Navigate replace to='/' />,
  },
]);

export default function Router() {
  return <RouterProvider router={router} />;
}

 

createBrowserRouter에서 path와 나란히 errorElement 를 선언하고 컴포넌트를 연결한다.

 

+ Navigate를 이용해서 바로 홈 루트로 보낼 수도 있다.