인프런 커뮤니티 질문&답변
작성한 질문수
인터셉트 + 패러렐 라우트 catch-all route 모달 닫힘 경로 문제
해결된 질문
작성
·
77
0
안녕하세요 제로초님!
제로초님 강의 보면서 개인 프로젝트 해보고 있는 수강생입니다.
현재 로그인과 회원가입 페이지를 인터셉트와 패러렐 라우트를 이용했는데,
(저의 현재 폴더 구조입니다.)
app/
├── layout.tsx
├── page.tsx // 메인 페이지
├── @modal/
│ ├── (.)login/
│ │ │ └── page.tsx // 로그인 모달 페이지
│ ├── (.)signup/
│ │ │ └── page.tsx // 회원가입 모달 페이지
// 프로필 수정 모달 페이지
│ ├── [...catchAll]/
│ │ └── page.tsx // 모달을 닫기 위한 catch-all 라우트
├── (auth)/
│ ├── login/
│ │ └── page.tsx // 로그인 페이지
│ ├── signup/
│ │ └── page.tsx // 회원가입 페이지
└── 기타 페이지들...
회원가입이 되면 메인 페이지('/')로 이동하게 했는데 router.push, replace로는 경로는 이동이 되나 모달이 닫히지 않는 문제가 있었습니다.
그래서 catch-all route를 이용해서 특정 경로에 매칭되지 않으면 모달이 닫히도록 null을 반환하였습니다.
// catch-all route
export default function ModalCatchAll() {
console.log('CatchAll triggered');
return null;
}
그런데 router.push('/') 메인 홈페이지인 '/' 경로로 이동을 해도 catch-all route가 실행되지 않았는데,
메인 경로 외에 게시글 라우트로 router.push('/foster') 경로를 변경했더니 catch-all route가 실행이 되었습니다.
router.back 말고도 push나 replace를 사용하고 싶어서 catch-all route를 사용했는데
메인 홈 경로는 안되고 다른 경로로 이동시킬 때는 catch-all route가 왜 적용되는지 모르겠어서 질문 남깁니다..
답변 2
0
이게 next.js 버그일 수도 있어서 기본적으로는 .next 캐시 지우고 다시 빌드해서 실행해보셔야 합니다. layout에서는 {modal}과 {children} 둘 다 사용하는 상황인 것이죠?
https://github.com/vercel/next.js/discussions/50284
이 이슈같은데요. layout과 page가 같이 있으면 발생할 수 있다고 하네요
https://github.com/vercel/next.js/discussions/50284#discussioncomment-10098569
0
안녕하세요, 인프런 AI 인턴입니다. kyung3098님,
패러랠 라우트와 인터셉터 라우트를 사용하여 모달을 제어하고 계신데, 문제는 홈 경로(‘/’)로 이동 시 모달이 닫히지 않는 부분인 것 같습니다. 그리고 ‘/foster’ 같은 다른 경로로 이동시에는 정상적으로 동작하는 상황이 궁금하신 것 같습니다.
문제에 대한 분석과 제안:
URL과 Router의 동작:
router.push를 통해/경로로 이동할 때, 인터셉터 라우트가 해당 경로에서도 활성화되지 않는 이유는 아마도/경로가 이미 모달을 닫은 후의 경로일 가능성이 있습니다. 다른 경로로 변경될 때는 새로운 경로 감지로 인해 catch-all이 트리거될 수 있습니다.모달과 라우팅 문제 해결 방안:
- useEffect를 활용: 모달이 열려 있는 상태를 감지하고 특정 조건(예: 홈 페이지로 라우팅)에서 모달을 닫는 로직을
useEffect로 추가하는 방법을 고려해보세요.
- 라우터 모듈로의 모달 상태 전환: 라우터를 통한 모달 상태 초기화나 특정 URL에서 모달을 강제로 닫도록 설정하는 것도 방법일 수 있습니다.
- useEffect를 활용: 모달이 열려 있는 상태를 감지하고 특정 조건(예: 홈 페이지로 라우팅)에서 모달을 닫는 로직을
Catch-All 라우트 작동 분석: catch-all 라우트가 특정 라우트에서 동작하지 않는 문제는, 라우터의 주문형 설정, 상태관리, 또는 페이지 초기화 순서와 관련이 있을 수 있습니다. Modal 또는 라우터의 히스토리 상태를 초기화하는 코드 및 작동 순서를 점검해 보세요.
관련 참고 링크로 해당 문제를 겪은 다른 수강생들의 질문들을 살펴보시면 도움이 될 수 있습니다:
- 모달 사용 시 Catch-All 라우팅에 대한 문제 해결
이러한 문제는 종종 코드의 작은 실수나 구성에 기인할 수 있습니다. 보다 명확한 해결을 위해 전체 코드를 검토하거나, 강의 내 유사한 예제를 참고하시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
넵 {modal}과 {children} 둘 다 사용하고 있습니다!
올려주신 이슈 참고하면서 다른 방법 찾아보겠습니다
감사합니다!!