라우트 가로채기

라우트 가로채기를 사용하면 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 경로를 로드할 수 있습니다. 이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우에 유용할 수 있습니다.

예를 들어, 피드에서 사진을 클릭할 때 피드 위에 모달로 사진을 표시할 수 있습니다. 이 경우 Next.js는 /photo/123 경로를 가로채고, URL을 마스킹하며, /feed 위에 오버레이합니다.

그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진으로 이동할 때는 모달 대신 전체 사진 페이지가 렌더링되어야 합니다. 이 경우 라우트 가로채기가 발생하지 않아야 합니다.

규칙

라우트 가로채기는 (..) 규칙으로 정의할 수 있습니다. 이는 세그먼트를 위한 상대 경로 규칙인 ../와 유사합니다.

다음과 같이 사용할 수 있습니다:

• (.): 같은 레벨의 세그먼트와 일치
• (..): 한 레벨 위의 세그먼트와 일치
• (..)(..): 두 레벨 위의 세그먼트와 일치
• (...): 루트 app 디렉토리부터의 세그먼트와 일치

예를 들어, feed 세그먼트 내에서 photo 세그먼트를 가로채려면 (..)photo 디렉토리를 만들면 됩니다.

(..) 규칙은 파일 시스템이 아닌 라우트 세그먼트를 기반으로 합니다.

예시

모달

라우트 가로채기는 병렬 경로와 함께 사용하여 모달을 만들 수 있습니다. 이를 통해 모달을 구축할 때 흔히 발생하는 다음과 같은 문제들을 해결할 수 있습니다:

• 모달 내용을 URL을 통해 공유 가능하게 만들기.
• 페이지를 새로 고침할 때 모달을 닫는 대신 컨텍스트를 유지하기.
• 이전 경로로 이동하는 대신 뒤로 가기 탐색 시 모달 닫기.
• 앞으로 가기 탐색 시 모달 다시 열기.

다음과 같은 UI 패턴을 고려해보세요. 사용자가 클라이언트 측 탐색을 사용하여 갤러리에서 사진 모달을 열거나 공유 가능한 URL을 통해 직접 사진 페이지로 이동할 수 있습니다:

위의 예시에서 photo 세그먼트로 가는 경로는 (..) 매처를 사용할 수 있습니다. 왜냐하면 @modal은 슬롯이며 세그먼트가 아니기 때문입니다. 이는 photo 경로가 파일 시스템 상으로는 두 레벨 위에 있지만 실제로는 한 세그먼트 레벨 위에 있다는 것을 의미합니다.

단계별 예시는 병렬 경로 문서를 참조하거나 이미지 갤러리 예시를 확인하세요.

알아두면 좋은 점:

• 다른 예시로는 전용 /login 페이지가 있으면서 상단 네비게이션 바에서 로그인 모달을 열거나, 사이드 모달에서 쇼핑 카트를 여는 것 등이 있습니다.