인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
병렬 라우팅과 인터셉팅 라우트
작성
·
556
·
수정됨
1
병렬 라우팅과 인터셉팅 라우트를 이용하여 작업중에 있습니다.
예를 들어 /product 라는 페이지에서 생성이라는 버튼을 눌렀을때
/product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고,
모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되는데
확인라는 버튼을 누를때 원하는것은 /product/[id] 로 경로이동 후 모달이 닫히는걸 예상하였는데 현재는
/product/[id] 로 경로 이동만하고 모달은 그대로 남아있습니다.
이럴경우에는 모달을 boolean 으로 따로 경로 이동후 닫히게 작업을 해줘야할까요?
더 좋은방법이나 제공하는 기능이 있을까해서 질문드립니다.
답변 2
0
공식문서 찾아본 결과
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal
이런 식으로 catchall 라우터 만들어서 해결 가능한 것 같습니다.
0
default.tsx에도 WriteModal 있는 건 아니죠?
main이랑 {modal} 사이에도 글자를 넣어서 한 번 뒤로가기 후에 Element 탭을 봐보세요. 그 때도 모달이 남아있는지를요
/product 라는 페이지에서 생성이라는 버튼을 눌렀을때 /product/write/[id] 로 경로 이동후 모달이 열려야합니다. 생성을 눌럿을 시 /product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고, 모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되고, Modal은 사라집니다. 하지만 모달 안의 확인라는 버튼을 누르면 rotuer.replace(/product/[id])로 이동하면서 모달이 닫히는걸 원하지만 경로만 이동하고 모달이 닫히지않습니다.
closeButton에 router.back() 이동 = 모달 닫힘 (O)
확인 버튼 클릭 시 router.replace(`product/${id}`) 경로 이동은되지만 모달이 닫히지 않음 (모달이 닫히는걸 원함)
입니다!
[코드가 너무 적나라하게 나와있어서 게시글 삭제해놓았습니다ㅠ]
생성 하였었고 그래도 똑같이 닫히지는 않고있습니다ㅠ
hyoloui 님 아직 해결 못하였고 middleware로 처리하려다가 순수 제공하는걸로만 해결하고싶어서
계속 방법 찾아보고있습니다!
공식문서 찾아본 결과
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal
이런 식으로 catchall 라우터 만들어서 해결 가능한 것 같습니다.
layout은 어디에엤나요?