라우트 매칭

라우터 매칭 검증 순서

React Router에서 URL이 어떤 컴포넌트로 가는지는 경로 패턴, nested route, index route, wildcard가 함께 결정하므로 실제 URL별 매칭표로 확인해야 한다.

01

상위 route 선택

루트부터 path segment를 비교해 어떤 layout route 아래로 들어갈지 정한다.

nested tree
02

index 확인

부모 경로와 정확히 일치하면 index route가 렌더링될 수 있다.

default child
03

동적 캡처

:id 세그먼트는 실제 값을 params로 저장하고 자식 컴포넌트에 전달한다.

useParams
04

실패 처리

아무 route도 맞지 않으면 * route나 errorElement에서 404 화면을 보여준다.

not found
/users/new
정적 경로 우선 의도 확인 :id가 new를 잡아버리면 생성 페이지가 상세 페이지로 오인된다.
specific route
/users/42
동적 params 추출 id가 숫자인지, 없는 id일 때 404인지 데이터 로딩 계층에서 검증한다.
param validation
/users/42/edit
nested child 매칭 부모 UserLayout과 자식 EditPage가 함께 렌더되는지 Outlet 위치를 본다.
Outlet
/unknown
wildcard 404 catch-all이 너무 위에 있으면 정상 경로를 가릴 수 있어 마지막에 둔다.
route order

테스트 URL

정상 상세 존재하는 id와 없는 id를 각각 열어 데이터/404 분기를 확인한다.
중첩 화면 부모 레이아웃이 유지되고 자식만 바뀌는지 본다.
뒤로가기 라우트 전환 뒤 브라우저 히스토리와 스크롤 복원이 어색하지 않아야 한다.