라우트 트리

TanStack Router는 중첩된 라우트 트리를 사용해 URL을 렌더링할 올바른 컴포넌트 트리와 매칭합니다.

라우트 트리를 빌드하기 위해 TanStack Router는 다음을 지원합니다.

두 방법은 핵심 기능과 동작을 정확히 동일하게 지원하지만, 파일 기반 라우팅은 같거나 더 나은 결과를 더 적은 코드로 구현합니다. 따라서 파일 기반 라우팅을 TanStack Router 구성에 선호하고 권장하는 방식으로 사용합니다. 대부분의 문서는 파일 기반 라우팅을 기준으로 작성합니다.

라우트 트리

중첩 라우팅은 URL을 사용해 중첩된 컴포넌트 트리를 렌더링할 수 있는 강력한 개념입니다. 예를 들어 URL이 /blog/posts/123이라면 다음과 같은 라우트 계층 구조를 만들 수 있습니다.

├── blog
│   ├── posts
│   │   ├── $postId

그리고 다음과 같은 컴포넌트 트리를 렌더링합니다.

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

이 개념을 더 큰 사이트 구조로 확장하되, 이번에는 파일 이름을 사용해 보겠습니다.

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _pathlessLayout/
│   ├── route-a.tsx
├── ├── route-b.tsx
├── files/
│   ├── $.tsx

위 구성은 TanStack Router에서 사용할 수 있는 유효한 라우트 트리 구성입니다. 파일 기반 라우팅에는 다양한 기능과 규칙이 있으므로 조금 더 자세히 살펴보겠습니다.

라우트 트리 구성

라우트 트리는 다음과 같은 몇 가지 방법으로 구성할 수 있습니다.

각 라우트 트리 유형에 대한 전체 문서는 위 링크에서 확인하거나, 다음 섹션으로 이동해 파일 기반 라우팅을 시작합니다.

라우트 트리​

라우트 트리 구성​

라우트 트리

라우트 트리 구성