라우팅이란, 클라이언트가 주소창에 url을 입력하면 서버에서 요청된 url에 해당하는 리소스를 전달해 주는 것을 말합니다.

전통적인 웹 사이트에서는 경로가 바뀔 때마다 서버에서 새로운 HTML을 받아오지만, 리액트를 사용한 SPA의 경우에는 하나의 HTML을 가지로 경로 별로 필요한 페이지를 보여주는 Client Side Routing을 합니다. (필요한 데이터는 fetch를 통해 받아 옵니다.)

리액트에서 SPA를 유지하면서 서버의 요청 없이 경로 별로 멀티 페이지를 보여주기 위해, 많이 사용하는 React Router 라이브러리에 대해서 알아보겠습니다.

Setup

npm install react-router-dom
#or
yarn add react-router-dom

Adding a Router

Browser Router를 사용하겠습니다. createBrowserRouter안에 배열로 경로에 대한 정보를 담아두고, RouterProvider를 생성해줍니다.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
    errorElement: <div>Not Found</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Outlet과 Params

예를들어 상단에 네이게이션 컴포넌트는 고정하고, 하단의 컴포넌트만 변경하고 싶을 때 Outlet을 사용하면 됩니다. 그러기 위해서는 라우터를 정의할 때 children 속성을 사용합니다.

특정 페이지의 상세 페이지를 Outlet에 보여주기 위해서 경로에 :키워드를 이용하여 경로를 세분화 할 수 있습니다.

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    children: [
      {
    	index: true, // 부모 path '/'에서 처음 보여지는 Outlet 컴포넌트
        element: <Home />,
      },
  	  {
    	path: "/videos",
        element: <Videos />,
      },
      {
        path: "videos/:id",
        element: <VideoDetail />,
      },
    ],
  },
]);

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

export default function Root() {
  return (
    <>
      {/* all the other elements */}
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}

---

참고
React Router 공식 홈페이지