React Router 는 "Client Side Routing" 을 가능하게 합니다.

기존 웹사이트에서는 브라우저가 웹 서버에 문서를 요청하고 CSS 및 JavaScript 자산을 다운로드 및 평가한 후 서버에서 전송된 HTML 을 렌더링합니다. 사용자가 링크를 클릭하면 새 페이지에 대한 프로세스를 처음부터 다시 시작합니다.

Client Side Routing 을 사용하면 앱에서 서버에 다른 문서를 요청하지 않고도 링크 클릭으로 URL 을 업데이트할 수 있습니다. 대신 앱에서 즉시 새 UI를 렌더링하고 fetch 를 통해 데이터를 요청하여 새 정보로 페이지를 업데이트할 수 있습니다.

이렇게 하면 브라우저가 완전히 새로운 문서를 요청하거나 다음 페이지를 위해 CSS 및 자바스크립트 에셋을 다시 평가할 필요가 없으므로 사용자 경험이 더 빨라집니다. 또한 애니메이션과 같은 보다 역동적인 사용자 경험을 제공할 수 있습니다.

Client Side Routing 은 Router 를 생성하고 Link 및 <Form> 을 사용하여 페이지에 linking/submitting 으로써 가능하게 됩니다.

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

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

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