[!WARNING] 지원되는 번들러를 사용하지 않는 경우에만 TanStack Router CLI를 사용해야 합니다. CLI는 라우트 트리 파일 생성만 지원하며 다른 기능은 제공하지 않습니다.

TanStack Router CLI로 파일 기반 라우팅을 사용하려면 @tanstack/router-cli 패키지를 설치해야 합니다.

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

설치한 후 package.json의 스크립트를 수정해 CLI가 파일을 watch하고 generate하도록 해야 합니다.

{
  "scripts": {
    "generate-routes": "tsr generate",
    "watch-routes": "tsr watch",
    "build": "npm run generate-routes && ...",
    "dev": "npm run watch-routes && ..."
  }
}

Solid

TypeScript를 사용하는 경우 tsconfig.json에 다음 옵션도 추가해야 합니다.

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

이제 TanStack Router에서 파일 기반 라우팅을 사용할 준비가 완료되었습니다.

생성된 라우트 트리 파일을 _ignore_하는 것을 잊지 않아야 합니다. 자세한 내용은 생성된 라우트 트리 파일 무시 섹션을 참고합니다.

CLI를 설치하면 tsr 명령을 통해 다음 명령을 사용할 수 있습니다.

`generate` 명령 사용

제공된 설정에 따라 프로젝트의 라우트를 생성합니다.

tsr generate

`watch` 명령 사용

지정된 디렉터리를 계속 감시하고 필요할 때 라우트를 다시 생성합니다.

사용법:

tsr watch

파일 기반 라우팅이 활성화된 상태에서 개발 모드로 애플리케이션을 시작하면 TanStack Router는 설정된 routesDirectory를 감시하고 파일이 추가, 제거 또는 변경될 때마다 라우트 트리를 생성합니다.

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

프로젝트에서 린터 및/또는 포매터를 사용하도록 설정한 경우 생성된 라우트 트리 파일을 무시할 수 있습니다. 이 파일은 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 파일을 생성하면 이 설정을 사용자 수준에서 사용하거나 단일 워크스페이스에만 적용할 수 있습니다.

설정

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

React

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

Solid

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

이 기본값이 프로젝트에 적합하다면 별도로 설정할 필요가 없습니다. 그러나 설정을 사용자 지정해야 한다면 프로젝트 디렉터리 루트에 tsr.config.json 파일을 생성하면 됩니다.

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

generate 명령 사용​

watch 명령 사용​

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

설정​

React

Solid

`generate` 명령 사용

`watch` 명령 사용

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

설정