React

esbuild.config.js
import { tanstackRouter } from '@tanstack/router-plugin/esbuild'

export default {
  // ...
  plugins: [
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
  ],
}

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

Solid

build.js
import * as esbuild from 'esbuild'
import { solidPlugin } from 'esbuild-plugin-solid'
import { tanstackRouter } from '@tanstack/router-plugin/esbuild'

const isDev = process.argv.includes('--dev')

const ctx = await esbuild.context({
  entryPoints: ['src/main.tsx'],
  outfile: 'dist/main.js',
  minify: !isDev,
  bundle: true,
  format: 'esm',
  target: ['esnext'],
  sourcemap: true,
  plugins: [
    solidPlugin(),
    tanstackRouter({ target: 'solid', autoCodeSplitting: true }),
  ],
})

if (isDev) {
  await ctx.watch()
  const { host, port } = await ctx.serve({ servedir: '.', port: 3005 })
  console.log(`Server running at http://${host || 'localhost'}:${port}`)
} else {
  await ctx.rebuild()
  await ctx.dispose()
}

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

이제 Esbuild 구성에 플러그인을 추가했으므로 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 파일을 만들면 이 설정을 사용자 수준에서 적용하거나 단일 워크스페이스에만 적용할 수 있습니다.

구성

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

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

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

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

Solid

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

구성​

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

구성