중첩 라우팅 outlet 구조 확인

레이아웃 라우트와 하위 화면 분리

상위 layout route는 공통 UI와 provider를 들고, child route는 Outlet 안에서 교체되는 화면만 맡습니다. index/detail/not-found child를 route tree에 함께 표시합니다.

URL 계약

Outlet 렌더링 위치 고정

Outlet은 하위 화면이 꽂히는 슬롯으로 두고 navigation과 breadcrumb는 상위 layout에서 계산합니다. child path가 바뀌어도 상위 state가 초기화되지 않는지 확인합니다.

라우터 매칭

상위 상태 초기화와 breadcrumb 오류

하위 화면 전환 때 상위 layout이 remount되거나 breadcrumb가 현재 child path를 놓치는 순간을 잡습니다. 직접 진입과 새로고침에서 provider state와 active nav가 유지되어야 합니다.

복원과 fallback

레이아웃 유지와 새로고침 검증

route tree, direct URL entry, Outlet render result, active navigation state를 기록합니다. 하위 경로가 실패해도 공통 레이아웃과 오류 child가 같은 tree 안에서 동작해야 합니다.

close

책임

상위 route는 공통 레이아웃을 유지하고 하위 route는 변경되는 화면만 렌더링한다 헤더, 탭, breadcrumb처럼 계속 보여야 하는 UI는 layout route에 두고, detail/list 같은 화면은 Outlet 아래로 보냅니다.

범위

경계

Outlet은 child route가 바뀌는 유일한 슬롯으로 둔다 index route, 동적 child route, not-found child를 같은 레이아웃 안에서 전환해 상위 state가 불필요하게 초기화되지 않게 합니다.

경계

Outlet 회귀

잘못된 하위 경로와 새로고침에서 공통 UI가 유지되는지 확인한다 중첩 URL로 직접 진입했을 때 Outlet 내용, navigation active state, breadcrumb가 같은 route tree 기준으로 맞는지 점검합니다.

점검

Outlet 라우팅 검증 지점

Outlet 전환 상위 layout route가 유지된 채 Outlet 내용만 index, detail, settings 화면으로 바뀌는지 확인합니다.

layout remount child route를 직접 열었을 때 상위 provider나 navigation이 초기화되면 중첩 구조가 URL과 맞지 않는 신호입니다.

route tree 증거 route tree, Outlet 결과, 새로고침 화면을 함께 남겨 공통 UI가 하위 경로 전환에 흔들리지 않는지 확인합니다.

Outlet 점검

질문: 상위 layout route는 유지되고 Outlet만 child route에 따라 바뀌는가
순서: route tree 작성 -> Outlet 배치 -> index, detail, not-found child route 직접 진입 확인
위험: child route를 상위 레이아웃 밖에 두면 화면 전환마다 공통 UI와 provider state가 초기화되고 breadcrumb도 URL과 어긋납니다.