Catch-all matching

[...slug]와 [[...slug]]는 기본 경로 매칭 여부가 다르다

URL path 조각은 순서대로 모여 params.slug가 되고, 선택적 catch-all만 조각이 없을 때 undefined를 허용한다.

[...slug]

필수 catch-all
/docs 매칭 안 됨
/docs/a ["a"]
/docs/a/b ["a", "b"]

목록, 홈, 인덱스처럼 기본 경로를 별도 페이지로 둘 때 선택한다.

[[...slug]]

선택 catch-all
/docs undefined
/docs/a ["a"]
/docs/a/b ["a", "b"]

문서 홈과 상세 경로를 한 페이지 컴포넌트에서 같이 다룰 때 선택한다.

URL path 조각이 params.slug로 들어오는 흐름

1

URL 수신

/docs/api/v1/auth

2

기준 경로 제외

/docs 뒤쪽만 읽음

3

조각 배열화

["api", "v1", "auth"]

4

컴포넌트 전달

params.slug: string[] | undefined

선택 기준

기본 경로 제외

/docs는 별도 홈으로 두고 하위 경로만 받을 때 [...slug]

기본 경로 포함

/docs와 /docs/a/b를 같은 화면에서 처리할 때 [[...slug]]

타입 처리

선택형은 렌더링 전에 slug ?? [] 같은 기본값을 둔다.