react-router-dom

react: ^18.2.0
typescript: ^4.9.5
react-router-dom: ^6.23.0

출처: React Router v6.4 튜토리얼 배우기

react-router-dom

react-router-dom docs

Client Side Routing

This enables faster user experiences because the browser doesn't need to request an entirely new document or re-evaluate CSS and JavaScript assets for the next page. It also enables more dynamic user experiences with things like animation.

"Client Side Routing"은 사용자 경험을 매우 빠르게 하였다. 그 이유는 브라우저가 다음 페이지를 위해 CSS, JS, assets 파일 또는 전체 문서를 요청할 필요가 없기 때문이다. 이 변화는 애니메이션과 같은 동적인 웹에 대한 사용자 경험을 가능하게 했다.

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} />
);

Nested Routes

createBrowserRouter는 v6.4에 추가되었으며, 다음과 같이 JSX 형태로 또는 plain objects로 작성해도 된다.

This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack.

It also enables the v6.4 data APIs like loaders, actions, fetchers and more.

v6.4 data API는 서버에서 해줘야 할 작업들을 클라이언트에서 처리하도록 loader, actions, fetchers를 제공한다.

• loader : 컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달한다
• actions : url에 form과 같은 리퀘스트를 보낼 때 데이터를 처리하는 부분이다
• fetchers : url을 변경하지 않고, 요청한 url에 데이터를 요청한다

// Configure nested routes with JSX
createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="contact" element={<Contact />} />
      <Route
        path="dashboard"
        element={<Dashboard />}
        loader={({ request }) =>
          fetch("/api/dashboard.json", {
            signal: request.signal,
          })
        }
      />
      <Route element={<AuthLayout />}>
        <Route
          path="login"
          element={<Login />}
          loader={redirectIfUser}
        />
        <Route path="logout" action={logoutUser} />
      </Route>
    </Route>
  )
);