[Next.js] Parallel Routes 를 사용한 Modal

hs·2023년 10월 26일

병렬 라우팅 기능을 사용한 모달의 경우 아래와 같이 모달창 url를 호출하는 방식

<Link href="/modal"></Link>

만약 레이아웃 레벨에서 모달 컴포넌트가 맨 아래에 위치할 경우 모달창 호출시 뒷배경의 위치가 모달 컴포넌트 위치로 스크롤 다운하는 현상이 발생

<body>
	{props.children}
	{props.modal}
</body>

변경된 코드 - scroll 옵션 추가

<Link href="/modal" scroll={false}></Link>

공식문서 - Parallel Routes

0개의 댓글