insung.log
로그인
insung.log
로그인
[Next.js] parallel route, default page, intercepting route
insung
·
2024년 6월 16일
팔로우
0
Next14
React
next
next.js
Nextjs
목록 보기
8/21
parallel
라우트
폴더명 앞에 @를 붙여 사용
한 화면에서 여러개의 page를 동시에 보여주는 방법 중 하나
layout시 {children}에 보여지는게 아닌 { 폴더명 } 에 보여지게 됨
참고로 @를 붙인 폴더도 경로에 영향을 안준다 (group과 같음)
default.tsx
page.tsx에 만들 내용이 없는 경우엔 default로 만드는게 더 낫다
보통 parallel 라우트시엔 page대신 default를 씀 (넣을내용이 없기 때문!)
Interceptiong 라우트
서로 주소가 다른데 여러 페이지를 띄울 수 있는 방법
클라이언트에서 라우팅 할때만 인터셉트 라우팅이 적용됨에 유의
클라이언트 컴포넌트에서 링크를 통해 경로를 이동해야 인터셉트 됨
폴더명을 (..)이름 또는 (.)이름로 이름 지어 사용
(..)이름 주소명 상에 부모를 기준, (.)는 현재 주소의 파일명을 기준으로 페이지를 가로챔
새로 고침을 하게되면 원 경로의 page가 표시됨을 유의
그렇기 때문에 (..)으로 가로채는 page와 정상적인 경로상의 page의 내용이 동일하게 만들어야 새로고침시 같은 페이지 내용을 표시한다
insung
안녕하세요 프론트엔드 관련 포스팅을 주로 하고 있습니다
팔로우
이전 포스트
[Next.js] not found, Image, Link, redirect
다음 포스트
[Next.js] 서버 컴포넌트와 클라이언트 컴포넌트
0개의 댓글
댓글 작성