React

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
    react(),
    // ...
  ],
})

또는 Vite 빠른 시작 예시를 복제해 시작할 수 있습니다.

Solid

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tanstackRouter({
      target: 'solid',
      autoCodeSplitting: true,
    }),
    solid(),
    // ...
  ],
})

또는 Vite 빠른 시작 예시를 복제해 시작할 수 있습니다.

이제 Vite 구성에 플러그인을 추가했으므로 TanStack Router에서 파일 기반 라우팅을 사용할 준비가 되었습니다.

생성된 라우트 트리 파일 무시

프로젝트에서 린터 또는 포매터를 사용하도록 구성했다면 생성된 라우트 트리 파일을 무시할 수 있습니다. 이 파일은 TanStack Router가 관리하므로 린터나 포매터가 변경해서는 안 됩니다.

생성된 라우트 트리 파일을 무시하는 데 도움이 되는 리소스는 다음과 같습니다.

[!WARNING] VSCode를 사용하는 경우 라우트 이름을 변경한 후 라우트 트리 파일이 예기치 않게 오류와 함께 열릴 수 있습니다.

VSCode 설정에서 파일을 읽기 전용으로 표시하면 이를 방지할 수 있습니다. 다음 설정을 사용해 검색 결과와 파일 감시기에서도 제외하는 것을 권장합니다.

{
  "files.readonlyInclude": {
    "**/routeTree.gen.ts": true
  },
  "files.watcherExclude": {
    "**/routeTree.gen.ts": true
  },
  "search.exclude": {
    "**/routeTree.gen.ts": true
  }
}

프로젝트 루트에 .vscode/settings.json 파일을 만들어 이 설정을 사용자 수준 또는 단일 워크스페이스에만 적용할 수 있습니다.

구성

파일 기반 라우팅에 Vite와 함께 TanStack Router Plugin을 사용하면 대부분의 프로젝트에서 작동하는 합리적인 기본값이 제공됩니다.

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single"
}

이 기본값이 프로젝트에 적합하다면 아무것도 구성할 필요가 없습니다. 하지만 구성을 사용자 지정해야 한다면 tanstackRouter 함수에 전달하는 구성 객체를 편집하면 됩니다.

사용 가능한 모든 구성 옵션은 파일 기반 라우팅 API 레퍼런스에서 확인할 수 있습니다.

Solid

생성된 라우트 트리 파일 무시​

구성​

생성된 라우트 트리 파일 무시

구성