Installation mit Vite

Um dateibasierte Routen mit Vite zu verwenden, müssen Sie das Paket @tanstack/router-plugin installieren.

npm install -D @tanstack/router-plugin

npm install -D @tanstack/router-plugin

Nach der Installation müssen Sie das Plugin zu Ihrer Vite-Konfiguration hinzufügen.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
    react(),
    // ...
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    // Please make sure that '@tanstack/router-plugin' is passed before '@vitejs/plugin-react'
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
    react(),
    // ...
  ],
})

Alternativ können Sie unser Quickstart Vite Beispiel klonen und loslegen.

Nachdem Sie das Plugin zu Ihrer Vite-Konfiguration hinzugefügt haben, sind Sie bereit, dateibasierte Routen mit TanStack Router zu verwenden.

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 des TanStack Router Plugins mit Vite für dateibasierte Routen 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 nichts weiter konfigurieren! Wenn Sie die Konfiguration jedoch anpassen müssen, können Sie dies tun, indem Sie das Konfigurationsobjekt bearbeiten, das an die Funktion tanstackRouter übergeben wird.

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