Installation mit Vite

Um die dateibasierte Routenverwaltung mit Vite zu nutzen, 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 solid from 'vite-plugin-solid'
import { tanstackRouter } from '@tanstack/router-plugin/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tanstackRouter({
      target: 'solid',
      autoCodeSplitting: true,
    }),
    solid(),
    // ...
  ],
})

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tanstackRouter({
      target: 'solid',
      autoCodeSplitting: true,
    }),
    solid(),
    // ...
  ],
})

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"
  }
}

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, mit der dateibasierten Routenverwaltung mit TanStack Router zu beginnen.

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 die dateibasierte Routenverwaltung 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.