중첩 라우팅 소개

중첩 라우팅은 URL의 계층과 화면의 계층을 하나의 route tree로 표현하는 방법입니다.

예를 들어 /dashboard/settings에서는 부모 route인 /dashboard와 자식 route인 settings가 한 branch로 매칭됩니다. 부모 element는 공통 레이아웃을 렌더하고, 그 안의 <Outlet />이 매칭된 자식 element의 자리가 됩니다.

부모 /dashboard + 자식 settings
→ /dashboard/settings
DashboardLayout의 main / Outlet
→ DashboardSettings

중첩 route의 세 가지 규칙

1. 자식 route의 상대 path는 부모 path 뒤에 붙습니다. 부모가 /dashboard이고 자식이 settings이면 최종 pathname은 /dashboard/settings입니다.
2. index route는 path 없이 부모 URL에서 부모의 Outlet에 렌더되는 기본 자식입니다. index route는 다시 자식을 가질 수 없습니다.
3. 부모 element에 <Outlet />이 없으면 자식 route가 매칭되어도 그 자식 element가 렌더될 위치가 없습니다.

path가 없는 부모 route는 URL segment를 추가하지 않고 레이아웃 중첩만 만듭니다. 반대로 path는 있지만 element가 없는 부모 route는 자식 URL에 prefix를 더할 뿐 레이아웃을 추가하지 않습니다.

Outlet을 가진 부모 레이아웃

Outlet은 현재 부모 아래에서 매칭된 자식 element를 렌더합니다. 매칭된 자식이 없으면 기본적으로 null을 렌더하므로, 부모 URL에도 본문이 필요하면 index route를 선언합니다.

import { NavLink, Outlet } from "react-router";

export default function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <nav aria-label="대시보드 메뉴">
          <NavLink to="overview">개요</NavLink>
          <NavLink to="settings">설정</NavLink>
          <NavLink to="analytics">분석</NavLink>
        </nav>
      </aside>

      <main>
        <h2>대시보드</h2>
        <Outlet />
      </main>
    </div>
  );
}

여기서 to="settings" 같은 상대 링크는 기본 relative="route" 규칙에 따라 현재 route 계층에서 해석됩니다. /로 시작하는 to="/contact"는 origin 안의 절대 pathname입니다.

부모와 자식 route 선언

React Router 8에서는 선언형 라우팅의 컴포넌트를 react-router에서 가져옵니다.

import { BrowserRouter, Route, Routes } from "react-router";
import DashboardLayout from "./pages/DashboardLayout";
import DashboardOverview from "./pages/DashboardOverview";
import DashboardSettings from "./pages/DashboardSettings";
import DashboardAnalytics from "./pages/DashboardAnalytics";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route index element={<DashboardOverview />} />
          <Route path="overview" element={<DashboardOverview />} />
          <Route path="settings" element={<DashboardSettings />} />
          <Route path="analytics" element={<DashboardAnalytics />} />
        </Route>

        <Route path="*" element={<p>페이지를 찾을 수 없습니다.</p>} />
      </Routes>
    </BrowserRouter>
  );
}

이 선언이 만드는 결과는 다음과 같습니다.

여러 route가 branch에 함께 매칭된다는 점이 핵심입니다. /dashboard/settings에서 부모와 자식 중 하나를 고르는 것이 아니라, 부모가 자식을 Outlet에 중첩해 함께 렌더합니다.

route 매칭과 호스트 응답은 다른 경계다

BrowserRouter의 route 선언은 애플리케이션이 시작된 뒤 현재 location을 매칭합니다. 주소창에 /dashboard/settings를 입력한 첫 문서 요청은 먼저 배포 호스트로 갑니다.

내부 settings Link → branch 정상
GET /dashboard/settings
→ host 404
점검: 호스트의 문서 응답 / fallback

내부 settings Link → branch 정상
GET /dashboard/settings
→ host 404
점검: 호스트의 문서 응답 / fallback

클라이언트 전용 SPA라면 호스트가 중첩 pathname에도 애플리케이션 문서를 반환하도록 rewrite 또는 fallback을 설정해야 합니다. 서버 렌더링이나 Framework Mode를 사용한다면 해당 서버 통합이 URL을 처리할 수 있습니다. React Router의 클라이언트 route만 추가해도 서버의 404가 자동으로 해결되는 것은 아닙니다.

렌더 결과 확인

중첩 라우팅을 쓰는 이유

• 헤더, 사이드바, 탭처럼 여러 자식 화면이 공유하는 UI를 부모 route 한곳에 둡니다.
• URL 계층과 화면 책임을 같은 route tree에서 읽을 수 있습니다.
• index route로 부모 URL의 기본 화면을 명시하고, 상대 path와 링크로 하위 경로를 지역적으로 관리합니다.
• 더 깊은 레이아웃이 필요하면 자식 element에도 Outlet을 두어 한 단계 더 중첩할 수 있습니다.

중첩 라우팅은 렌더 횟수를 보장하는 성능 기능이 아닙니다. 부모 route가 계속 branch에 포함되더라도 실제 render와 commit 여부는 React의 일반적인 상태·props·context·reconciliation 규칙을 따릅니다. 핵심 이점은 공통 UI와 자식 화면의 소유 경계를 명시하는 데 있습니다.

중첩 라우팅을 읽을 때는 pathname → 매칭 branch → 각 부모의 Outlet → 최종 자식 element 순서로 확인합니다. 직접 진입 문제까지 다룰 때는 그 앞에 호스트가 애플리케이션 문서를 반환했는가를 한 단계 더 붙이면 route 문제와 배포 문제를 분리할 수 있습니다. 세 자식 화면을 준비하기

앞의 route 선언을 실행하려면 import한 자식 파일도 있어야 합니다. 개요 파일을 다음처럼 만들고, 설정·분석도 각 파일 이름에 맞는 기본 export와 화면 제목을 둡니다.

export default function DashboardOverview() {
  return <p>개요 화면</p>;
}

DashboardSettings.jsx의 기본 export는 DashboardSettings이며 설정 화면, DashboardAnalytics.jsx는 DashboardAnalytics이며 분석 화면을 반환합니다. 별도 데이터 요청 없이도 메뉴와 Outlet의 연결을 먼저 확인할 수 있습니다.

이 절의 App은 BrowserRouter를 이미 갖고 있습니다. 진입 파일은 createRoot로 <App />을 렌더하며 같은 라우터를 다시 감싸지 않습니다. 공통 레이아웃을 둔다는 설계와 라우터 provider를 중복한다는 구현은 별개입니다.

규칙 하나를 지우면 무엇이 사라질까요?

두 변경은 각각 원래 코드에서 따로 시험한다고 가정합니다.

1. index route만 제거하고 /dashboard와 /dashboard/overview에 진입합니다.
2. route 선언은 원래대로 두고 DashboardLayout의 <Outlet />만 제거한 뒤 /dashboard/settings에 진입합니다.

각 경우에 사이드 메뉴·대시보드 제목·자식 본문 중 무엇이 보이는지와 URL 매칭 자체가 실패했는지를 구별합니다.