Intercepting Routes

Intercepting Route는 UI를 통해 이동할 때 기본 라우팅을 가로채서 대체 뷰나 다른 컴포넌트를 표시할 수 있다. 페이지 새로고침이나 URL에 직접 이동할 경우 기존 뷰를 여전히 보여준다.

쉽게 말해서 UI 라우팅을 통해 이동할 때 같은 URL이라도 다른 뷰를 보여준다. 예를 들어서 /posts에 이미지들이 여러 개 나열되어 있다고 해보자. 이미지를 클릭하면 /posts/:id로 이동하게 되는데 원래는 이때 상세 페이지가 나타난다. 하지만 intercepting routes를 사용하면 이미지를 클릭시 /posts/:id로 똑같이 이동하지만 해당 post에 대한 요약본을 화면에 띄워줄 수도 있는 것이다.

사용

Intercepting Routes는 폴더를 통해 구현이 가능하다.

• (.) to match segments on the same leve
• (..) to match segments one level above
• (..)(..) to match segments two levels above
• (...) to match segments from the root app directory

직접 해보면서 확인해보자.

📦a
 ┣ 📂b
 ┃ ┗ 📜page.tsx
 ┗ 📜page.tsx

// app/a/page.tsx
import Link from "next/link";

export default function A() {
  return (
    <div>
      <h1>Here is /a </h1>
      <Link href={"/a/b"}>Go to /a/b </Link>
    </div>
  );
}


// app/a/b/page.tsx
export default function B() {
  return (
    <div>
      <h1>Here is /a/b</h1>
    </div>
  );
}

/a Url에서 link를 클릭하면 /a/b로 가는 단순한 컴포넌트이다. 이제 여기서 intercepting route를 사용할 수 있다.

a 폴더 내부, 즉 b 폴더가 있는 경로에서 (.)b 폴더를 생성하고 그 내부에 page.tsx를 생성했다.

📦a
 ┣ 📂(.)b
 ┃ ┗ 📜page.tsx
 ┣ 📂b
 ┃ ┗ 📜page.tsx
 ┗ 📜page.tsx

// app/a/(.)b/page.tsx
export default function InterceptedB() {
  return (
    <div>
      <h1>Here is InterceptedB!</h1>
    </div>
  );
}

이렇게 설정 후에 /a에서 Link를 클릭해서 /a/b로 이동하면 Here is /a/b가 나오는 게 아니라 아래와 같이 나온다. 새로고침을 하거나 URL로 직접 이동하면 Here is /a/b가 나온다.

말 그대로 라우팅을 가로채 내가 원하는 화면을 사용자에게 보여줄 수 있다.

(.)를 사용해서 현재 같은 위치 라우팅을 intercepting 했지만 (..)를 사용하면 상위 segments를 가로챌 수 있다.

📦a
 ┣ 📂b
 ┃ ┗ 📜page.tsx
 ┣ 📂c
 ┃ ┣ 📂(..)b
 ┃ ┃ ┗ 📜page.tsx
 ┃ ┗ 📜page.tsx
 ┗ 📜page.tsx

// app/a/c/(..b)page.tsx
export default function InterceptedB() {
  return (
    <div>
      <h1>(..) Intercepted B!!</h1>
    </div>
  );
}

(..)(..)이나 (...)도 같은 방식으로 사용하면 된다.