Next Intercepting Routes(라우트 가로채기)

저번 Parallel Routes(병렬 라우트)를 통해 모달 창 구현하기를 이어서 모달 창 기능에
Intercepting Routes(라우트 가로채기) 기능을 추가해 보았다.

 

Intercepting Routes (라우트 가로채기)

경로를 가로채면 현재 페이지의 콘텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있다.
라우팅  기능은 특정 경로를 "차단"하여 다른 경로를 표시할 때 유용하다고 함.

 

가로채기 경로는 (..) 규칙을 사용하여 정의할 수 있으며,
상대 경로 규칙../과 유사하지만 세그먼트에 대한 규칙이다?.

• (.) to match segments on the same level
• (..) to match segments one level above
• (..)(..) to match segments two levels above
• (...) to match segments from the root app directory

예시로, (..) photo 디렉토리를 만들어 feed 세그먼트 내에서 photo 세그먼트를 가로챌 수 있다

즉 feed 내에 (..) photo 디렉터리에 파일이  feed 내에 또 다른 photo파일의 경로를 가로채서
유저가 해당 /feed/photo 경로로 이동시 해당 경로 파일이 렌더링 되는 것이 아닌
feed/(..) photo 경로에 있는 파일이 렌더링 된다!

 

모달 창 구현하기

저번 parallel rotues를 적용시켜서 beforeLogin/@modal/i/flow/login 폴더 경로에 
Loginmodal 컴포넌트를 보여주게끔 모달 창을 구현하였다.

여기서 문제는 i/flow/login이라는 주소로 이동하기 때문에 기존 레이아웃 위에
렌더링 되는 것이 아닌 새로운 주소에서 렌더링 된다.

여기서  Intercepting Routes(라우트 가로채기)를 적용시켜서
기존 레이아웃 위에 렌더링 시켜보자

 

폴더 구조는 다음과 같이 만들었다.

 

이제  intercepting routes 가 유저가 i/flow/login으로 이동 시에
@modal/(.) i/flow/login 에 파일이 해당 경로를 가로채서
@modal/(.)i/flow/login 내에 있는 파일이 렌더링 된다.

이때  중요한 부분은 (.)를 적은 이유다. before/@modal/i/flow/login에 있는 파일이
before//i/flow/login 에 파일을 가로채기 위에서는 두 단계 위에 있는
경로로 이동해야 한다고 생각하겠지만 intercepting routes는
브라우저 주소를 기준으로 생각해야 한다. @modal 세그먼트로 적용되기 때문에
파일 route에 제외되며  before 폴더 안에서 (.) 같은 경로에 있는 폴더를 찾도록
(i/flow/login 폴더를 찾도록) 적용한 것이다. (너무 어려운데?)

parallel route의 의해  layout에 modal props에 modal @modal/(.) i/flow/login 가 들어감

 

 

*중요 여기서 intercepting routes에 의해  before/i/flow/login 파일은
필요가 없어질 거라는 생각이 들 수 있지만 해당 페이지에서 유저가
새로고침을 시도하거나 next의 hard navigation에 의해
전체 html 파일을 다시 받아오게 되면 before/@modal/i/flow/login 에 있는
가로채기가 적용된 파일이 렌더링 되는 것이 아닌
before/i/flow/login 경로에 있는 파일이 렌더링 된다! 

 

next 공식 문서 hard navigation :

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

참조 블로그:https://velog.io/@ckstn0777/Next.js-13-Parallel-Routes-Intercepting-Routes