Installation mit dem Router CLI

Um die dateibasierte Routenführung mit dem TanStack Router CLI zu nutzen, müssen Sie das Paket @tanstack/router-cli installieren.

npm install -D @tanstack/router-cli

npm install -D @tanstack/router-cli

Nach der Installation müssen Sie Ihre Skripte in Ihrer package.json anpassen, damit das CLI Dateien beobachten und generieren kann.

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

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

Sie sollten nicht vergessen, die generierte Route-Tree-Datei zu ignorieren. Gehen Sie zum Abschnitt Ignorieren der generierten Route-Tree-Datei, um mehr zu erfahren.

Mit installiertem CLI stehen die folgenden Befehle über das tsr Kommando zur Verfügung

Generiert die Routen für ein Projekt basierend auf der bereitgestellten Konfiguration.

tsr generate

tsr generate

Überwacht kontinuierlich die angegebenen Verzeichnisse und generiert Routen bei Bedarf neu.

Verwendung

tsr watch

tsr watch

Wenn die dateibasierte Routenführung aktiviert ist, überwacht TanStack Router bei jedem Start Ihrer Anwendung im Entwicklungsmodus Ihr konfiguriertes routesDirectory und generiert Ihren Routen-Tree, wenn eine Datei hinzugefügt, entfernt oder geändert wird.

Wenn Ihr Projekt für die Verwendung eines Linters und/oder Formatierers konfiguriert ist, möchten Sie möglicherweise die generierte Route-Tree-Datei ignorieren. Diese Datei wird von TanStack Router verwaltet und sollte daher nicht von Ihrem Linter oder Formatierer geändert werden.

Hier sind einige Ressourcen, die Ihnen helfen, die generierte Route-Tree-Datei zu ignorieren

• Prettier - https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore
• ESLint - https://eslint.org/docs/latest/use/configure/ignore#ignoring-files
• Biome - https://biomejs.dev/reference/configuration/#filesignore

Sie können dies in den VSCode-Einstellungen verhindern, indem Sie die Datei als schreibgeschützt markieren. Wir empfehlen außerdem, sie mit den folgenden Einstellungen aus den Suchergebnissen und Dateibewachern auszuschließen

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

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

Sie können diese Einstellungen entweder auf Benutzerebene oder nur für einen einzelnen Arbeitsbereich verwenden, indem Sie die Datei .vscode/settings.json im Stammverzeichnis Ihres Projekts erstellen.

Bei Verwendung des TanStack Router CLI für die dateibasierte Routenführung werden einige sinnvolle Standardeinstellungen mitgeliefert, die für die meisten Projekte funktionieren sollten

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

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

Wenn diese Standardeinstellungen für Ihr Projekt funktionieren, müssen Sie überhaupt nichts konfigurieren! Wenn Sie jedoch die Konfiguration anpassen müssen, können Sie dies tun, indem Sie eine tsr.config.json-Datei im Stammverzeichnis Ihres Projektverzeichnisses erstellen.

Alle verfügbaren Konfigurationsoptionen finden Sie in der API-Referenz für dateibasierte Routenführung.