React · router

React Router 중첩 라우트와 Outlet 렌더링 구조

부모 라우트는 공통 레이아웃을 유지하고 자식 라우트 화면은 Outlet 위치에 끼워집니다.

Nested Route 구성

outlet

Parent Route

대시보드 같은 공통 경로를 정의합니다.

Layout Component

사이드바와 헤더를 계속 유지합니다.

Outlet

매칭된 자식 화면이 들어갈 자리를 표시합니다.

Child Route

하위 URL별 페이지 컴포넌트를 연결합니다.

Navigation

부모 안에서 자식 경로로 이동합니다.

parent route → layout → child match → Outlet → child page

React Router 중첩 라우트와 정리

중첩 라우팅은 URL을 길게 만드는 기능이 아니라 공통 UI와 변하는 화면 영역을 분리하는 구조입니다.