React | react-router-dom V6

Jiseong·2023년 1월 4일

react

목록 보기

2/5

react-router-dom v6에 대해 알아보자.

🔥 createBrowserRouter

✨ Router.tsx

import { createBrowserRouter } from "react-router-dom";
import Root from "./Root";
import About from "./About";
import Home from "./Home";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

export default router;

createBrowerRouter를 통해서 라우터를 생성한다. [] 형태로 입력하며 각각의 오브젝트는 path, element를 갖는다. path 경로로 접속하면 element의 컴포넌트를 렌더링해 준다.

children

children은 []형태로 입력하며 / 경로의 하위 경로이다. 각각의 요소를 보자.

{
  path: "",
  element: <Home />,
},

/로 접속할 경우 <Home>을 렌더링한다.

{
  path: "about",
  element: <About />,
},

/about으로 접속할 경우 <About>을 렌더링 한다.

문제점

하지만 / 이든 /about이든 접속할 경우 하위 컴포넌트들은 무시당한 채로 <Root>만 보이게된다. 아래에 해결하는 방법을 알아보자.

✨ Root.tsx

import { Outlet } from "react-router-dom";
import Header from "./components/Header";

export default function Root() {
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
}

`Outlet`

react-router-dom의 Outlet은 children의 컴포넌트들을 렌더링해 준다.
/로 접속할 경우 <Outlet />은 <Home />으로 대체되어 질 것이다.
마찬가지로 /about으로 접속할 경우 <Outlet />은 <About />으로 대체되어 질 것이다.

🔥 RouterProvider

✨ Index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "./Router";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);

우리는 위에서 작성한 Router들의 존재를 알려야한다. RouterProvider를 통해 수행할 수 있다. <RouterProvider router={router} />와 같이 작성 하면된다.

🔥 errorElement

errorElement 값을 통해서 에러를 처리할 수 있다.

✨ Router.tsx

import { createBrowserRouter } from "react-router-dom";
import ErrComponent from "./components/ErrComponent";
import Root from "./Root";
import About from "./screens/About";
import Home from "./screens/Home";
import NotFound from "./screens/NotFound";

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

export default router;