Installation mit der Router CLI

Um dateibasierte Routen mit der TanStack Router CLI zu verwenden, 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 ändern, damit die 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 && ..."
  }
}

Wenn Sie TypeScript verwenden, sollten Sie auch die folgenden Optionen zu Ihrer tsconfig.json hinzufügen.

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

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

Damit sind Sie bereit, dateibasierte Routen mit TanStack Router zu verwenden.

Sie sollten nicht vergessen, die generierte Routenbaumdatei zu ignorieren. Lesen Sie im Abschnitt Ignorieren der generierten Routenbaumdatei mehr darüber.

Mit der installierten CLI sind die folgenden Befehle über den tsr-Befehl verfügbar.

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

tsr generate

tsr generate

Beobachtet kontinuierlich die angegebenen Verzeichnisse und generiert Routen bei Bedarf neu.

Verwendung

tsr watch

tsr watch

Wenn dateibasierte Routen aktiviert sind, wird TanStack Router jedes Mal, wenn Sie Ihre Anwendung im Entwicklungsmodus starten, Ihr konfiguriertes routesDirectory beobachten und Ihren Routenbaum generieren, sobald 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 der Verwendung der TanStack Router CLI für dateibasierte Routen sind einige vernünftige Standardeinstellungen enthalten, 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 nichts konfigurieren! Wenn Sie die Konfiguration jedoch anpassen müssen, können Sie dies tun, indem Sie eine Datei tsr.config.json im Stammverzeichnis Ihres Projekts erstellen.

Da Sie Solid verwenden, sollten Sie Folgendes zu Ihrer Datei tsr.config.json hinzufügen.

{
  "target": "solid"
}

{
  "target": "solid"
}

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