인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

Next + React Query로 SNS 서비스 만들기

병렬 라우팅과 인터셉팅 라우트

24.01.10 11:02 작성

·

525

·

수정됨

1

병렬 라우팅과 인터셉팅 라우트를 이용하여 작업중에 있습니다.

예를 들어 /product 라는 페이지에서 생성이라는 버튼을 눌렀을때

/product/write/[id] 로 경로는 이동하며, 병렬 라우팅과 모달이 생성되는것까지는 적용이되었고,

모달을 닫을시에는 closeButton에 router.back()으로 /product로 이동이 되는데

확인라는 버튼을 누를때 원하는것은 /product/[id] 로 경로이동 후 모달이 닫히는걸 예상하였는데 현재는
/product/[id] 로 경로 이동만하고 모달은 그대로 남아있습니다.

이럴경우에는 모달을 boolean 으로 따로 경로 이동후 닫히게 작업을 해줘야할까요?
더 좋은방법이나 제공하는 기능이 있을까해서 질문드립니다.

 

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 26. 10:52

공식문서 찾아본 결과

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal

이런 식으로 catchall 라우터 만들어서 해결 가능한 것 같습니다.

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 13:59

모달을 패러렐라우팅으로 안 여신 것 같은데요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 15:23

layout은 어디에엤나요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 19:32

전체 구조를 보여주셔야...

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 19:33

각 코드도 보여주세요.

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 20:32

default.tsx에도 WriteModal 있는 건 아니죠?

main이랑 {modal} 사이에도 글자를 넣어서 한 번 뒤로가기 후에 Element 탭을 봐보세요. 그 때도 모달이 남아있는지를요

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 21:00

처음에는 라우터 백 할 때 모달 남아있다고 하지 않으셨나요? 문제가 바뀌었는데요? 정확한 에러 증상이 뭔가요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 10. 21:03

@modal 내부 (.)product/[id]는 없네요.

밍끼님의 프로필 이미지

2024. 01. 10. 21:05

/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님의 프로필 이미지

2024. 01. 11. 17:29

질문자님 해결 하셨나요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 12. 10:32

@modal 내부 (.)product/[id]/default.tsx 도 생성하셨나요?

밍끼님의 프로필 이미지

2024. 01. 15. 15:26

생성 하였었고 그래도 똑같이 닫히지는 않고있습니다ㅠ
hyoloui 님 아직 해결 못하였고 middleware로 처리하려다가 순수 제공하는걸로만 해결하고싶어서
계속 방법 찾아보고있습니다!

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 01. 26. 10:52

공식문서 찾아본 결과

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#dismissing-a-modal

이런 식으로 catchall 라우터 만들어서 해결 가능한 것 같습니다.

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기