Tanstack Router 3

File-Based Routes

파일 기반 라우팅을 쓰자. Tanstack Router에서 major로 삼은 라우팅 방식이기 때문이다. 그리고 편하다.

Prerequistes

먼저 라이브러리 설치부터 하자.

pnpm install @tanstack/router-vite-plugin @tanstack/router-cli

다음으로 vite 셋팅을 해야한다. 그래야 dev 모드에서 라우팅과 함께 페이지를 자동으로 만들어준다.

// vite.config.ts
import { defineConfig } from 'vite'
import { TanStackRouterVite } from '@tanstack/router-vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // ...,
    TanStackRouterVite(),
  ],
})

File Naming Conventions

아래는 Route Tree & Nesting 가이드에 맞는 File Naming Convention이다

1. __root.tsx:

모든 페이지의 부모가 되는 routed이다. 항상 열려 있다.

2. .Separator

nested된 페이지임을 말한다. 파일명이 blog.posts.tsx라면 blog/posts로 접근이 된다.

3. $Token

path param으로 접근하는 페이지임을 말한다. 파일명이 post.$post.tsx라면 접근 url은 post/[id]가 된다.

4. _ Prefix

해당 페이지 레이아웃 전용으로 route에 있지만 라우터로 접근할 수 없는 페이지임을 말한다.

5. _Suffix

해당 페이지는 어떤 부모에도 속하지 않는 페이지임을 말한다.

6.(folder) folder name pattern

route 그룹 만들 때 사용한다.

7. index Token

Route Segments가 /로 끝날 때 사용한다. 근데 그룹 라우터 아니고 단일 페이지면 routeSegments.tsx 쓰자 그냥

8. .route.tsx File Type

blog.post.route.tsx이거나 blog/post/route.tsx는 모두 /blog/post로 꽂힌다.

9. .lazy.tsx File Type

해당 페이지를 lazy loading 한다고 의미한다. blog.post.lazy.tsx는 blog.post랑 같다.