React Router Dom

라우팅이란 특정 경로로 데이터를 보낼때 사용되는 과정으로, Single Page Application인 리액트에서 URL에 따라 그 경로에 대한 페이지를 보여주는 것을 의미하기도 합니다. 리액트의 라우팅을 도와주는 라이브러리 중 하나가 바로 React Router Dom 입니다.

---

시작하기

리액트 프로젝트를 먼저 만들어 줍니다.

$ npx create-react-app ./

리액트 라우터 돔 설치

$ npm install react-router-dom

---

createBrowserRouter와 RouterProvider

index.js에 createBrowserRouter로 첫 번째 경로를 구성해줍니다.
첫 번째 경로 즉, 최상위 경로이기 때문에 프로젝트에선 이제 리액트 라우터 돔을 사용할 수 있게됩니다.

RouterProvider는 앱을 렌더링 할 수 있도록 도와줍니다.

import

// index.js
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// index.js
const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

위와 같이 작성하여 최상위 경로를 설정해줍니다.
저는 리액트 라우터 돔 공식문서에서 권장하는 Root 컴포넌트로 하였습니다.

---

Nasted Route

children 속성을 사용하면 중첩 라우팅이 가능합니다.

// index.js
const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      { 
        index: true,
        path: '/',
        element: <Main /> 
      },
      {
        path: '/login',
        element: <Login />,
      },
      {
        path: '/signup',
        element: <Signup />,
      },
    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

children 속성에 작성된 배열은 Root 컴포넌트 내에서 Outlet 컴포넌트 위치에 렌더 됩니다.

// Root.js
import './Root.css';
import { Outlet } from 'react-router-dom';
import Nav from './components/Nav'

function Root() {
  return (
    <div>
      <Nav />
      <Outlet />
    </div>
  );
}

export default Root;

---

오류 페이지 관리하기

지정 경로 이외의 경로로 접근 할 때 렌더시켜 줄 오류페이지를 설정해주겠습니다.
errorElement 속성에 라우팅 오류시에 보여줄 ErrorPage 컴포넌트를 넣어주기만 하면 됩니다.

index.js

// index.js
const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      { 
        index: true,
        path: '/',
        element: <Main /> 
      },
      {
        path: '/login',
        element: <Login />,
      },
      {
        path: '/signup',
        element: <Signup />,
      },
    ]
  }
])

다음은 ErrorPage 컴포넌트입니다.

ErrorPage.jsx

// ErrorPage.jsx
import React from 'react'
import { useRouteError } from 'react-router-dom'

const ErrorPage = () => {
  const error = useRouteError();
  console.error(error);
 
  return (
    <div>ErrorPage</div>
  )
}

export default ErrorPage

렌더링이나 로더 중에 발생하는 오류를 반환해주는 useRouteError를 추가해주었습니다.

---

👇🏻👀

---

Reference

리액트 라우터 공식문서
리액트 라우터 튜토리얼 실행 블로그