Rspack 또는 Rsbuild에서 파일 기반 라우팅을 사용하려면 @tanstack/router-plugin 패키지를 설치해야 합니다.

react: @tanstack/router-plugin solid: @tanstack/router-plugin

설치한 후 구성에 플러그인을 추가해야 합니다.

React

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/rspack'

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [
        tanstackRouter({
          target: 'react',
          autoCodeSplitting: true,
        }),
      ],
    },
  },
})

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

Solid

rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginBabel } from '@rsbuild/plugin-babel'
import { pluginSolid } from '@rsbuild/plugin-solid'
import { tanstackRouter } from '@tanstack/router-plugin/rspack'

export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSolid(),
  ],
  tools: {
    rspack: {
      plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],
    },
  },
})

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

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

구성

파일 기반 라우팅에 Rspack(또는 Rsbuild)과 TanStack Router Plugin을 사용할 때 대부분의 프로젝트에서 작동하는 합리적인 기본값이 제공됩니다.

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

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

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

Solid

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

구성​

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

구성