nested route

Outlet과 중첩 라우트

대시보드처럼 공통 UI가 있는 화면은 URL 계층과 컴포넌트 계층을 같은 모양으로 맞추면 유지보수가 쉬워집니다.

Parent route

Parent route

/dashboard가 사이드바와 공통 헤더를 가진 레이아웃을 렌더링합니다.

Outlet slot

Outlet slot

부모 컴포넌트 안에서 자식 라우트가 들어갈 정확한 위치를 표시합니다.

자식 경로

자식 경로

settings와 analytics 같은 상대 경로가 부모 경로 아래에 붙습니다.

Index route

Index route

/dashboard로 직접 들어왔을 때 보여줄 기본 자식 화면을 정합니다.

보존 메뉴와 헤더가 다시 만들어지지 않고 콘텐츠 영역만 바뀌어야 합니다.
상대 경로 자식 Route의 path는 부모 기준으로 읽어 최종 URL을 계산합니다.
복귀 뒤로 가기에서 부모 레이아웃과 선택 메뉴가 같은 상태로 돌아와야 합니다.

중첩 라우팅의 핵심은 레이아웃 재사용보다 URL 계층과 화면 계층이 같은 규칙으로 움직이는지입니다.