중첩 라우팅은 URL 의 세그먼트를 컴포넌트 계층 구조와 데이터에 연결하는 일반적인 개념입니다. React Router 의 중첩 라우팅은 2014년경 Ember.js 의 라우팅 시스템에서 영감을 받았습니다. Ember 팀은 거의 모든 경우에서 URL 의 세그먼트가 라우팅을 결정한다는 사실을 깨달았습니다:

• 페이지에 렌더링할 레이아웃
• 해당 레이아웃의 데이터 종속성

React Router 는 URL 세그먼트와 데이터에 연결된 중첩 레이아웃을 생성하기 위한 API를 통해 이러한 관습을 수용합니다.

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

// Or use plain objects
createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "contact",
        element: <Contact />,
      },
      {
        path: "dashboard",
        element: <Dashboard />,
        loader: ({ request }) =>
          fetch("/api/dashboard.json", {
            signal: request.signal,
          }),
      },
      {
        element: <AuthLayout />,
        children: [
          {
            path: "login",
            element: <Login />,
            loader: redirectIfUser,
          },
          {
            path: "logout",
            action: logoutUser,
          },
        ],
      },
    ],
  },
]);