[Next.js] Parallel Routes, Intercepting routes

개요

• 마이페이지에서 내 정보 수정 버튼을 누르면
  내 정보 수정 페이지가 모달 창으로 뜨게 하는 작업 진행 중
• +intercepting routes (가로채기) 구현

//폴더구조

@modal
   ㄴ(.)member
       ㄴ[id] page.tsx
member
   ㄴ[id] page.tsx
.
.
.

문제 및 해결

[문제1]. 오류 메세지

해결

• 구글링해보니 동일한 폴더명 때문에 종종 생기는 오류인 것 같아 member/[id]를 통으로 삭제 후 intercepting routes 가 정상적으로 동작하는 지 확인
• 다시 폴더를 생성하니 오류 메세지는 사라졌다

[문제2]. intercepting Routes

마이페이지의 "내 정보 수정" 버튼 클릭 시 모달 창 띄우는 건 성공했으나,
그 상태에서 새로고침을 하거나 주소창에 경로를 입력해 접속하면
모달이 아닌 member/[id]/page.tsx 가 보여지게 됨

해결

인터셉팅 라우트는 클라이언트에서 라우팅할 때에만 적용된다

즉, 브라우저에서 처음 접속 시 (//localhost:3000/member/[id])에는 @modal/member/[id] 가 아닌 member/[id]가 실행된다

= 가로채기가 발생하지 않는 상황

// member/[id]/page.tsx
'use client'
import { useRouter } from 'next/navigation'
const page = () => {
  const route = useRouter()
  route.replace('/mypage')
  return null
}
export default page

• 해당 페이지에서 마이페이지로 이동 (route.replace('/mypage')
• 주소창에 '//localhost:3000/member/[id]' 을 쳐서 접속하거나
  새로고침할 경우에는 마이페이지로 이동