인터셉트 라우트

인터셉트 라우트란?

인터셉트 라우트는 특정 경로를 가로채서 다른 페이지로 이동시키는 기능이다.

 

이 기능을 사용하면 사용자가 특정 URL로 이동할 때 임시로 다른 컴포넌트를 보여주거나, `모달`을 띄우는 등 경로에 따른 UI 처리가 가능해진다. 이 과정에서 기존 페이지 상태는 유지되므로, 복잡한 UI 전환을 구현할 때 특히 유용하다.

 

사용 예제

 

`/news/:slug/image` 경로로 접근하게되면,

`/news/:slug/@modal/(.)image` 컴포넌트가 실행된다. 새로고침하면 `/news/:slug/image`의 경로가 정상적으로 표시된다.

 

@modal

`@modal`은 병렬 라우트다. (자세한 소개는 생략)

 

(.)image

`(.)` 소괄호 하고 안에 .점을 찍어 해당 경로로 접근하게 해준다. 

import해올 때 `from '../../'` 이런식으로 경로를 불러오는거라고 생각하면 된다.

 

지금 현재 `(.)image`를 작성해준것은, `/news/:slug/image` 경로를 인터셉트하는 것을 뜻한다.

 

그럼 참고로 `(..)image` 이렇게 작성해줘야하는거 아닌가? 라고 생각이 들겠지만

@modal처럼, 병렬라우트 안에 인터셉트 라우트를 사용할 때, 병렬라우트는 경로를 생략한다고 생각해야한다. 그래서

`(.)image`로 작성해준 것이다.