Installation mit Webpack

Um dateibasierte Routen mit Webpack 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 Konfiguration hinzufügen.

// webpack.config.ts
import { tanstackRouter } from '@tanstack/router-plugin/webpack'

export default {
  plugins: [
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
  ],
}

// webpack.config.ts
import { tanstackRouter } from '@tanstack/router-plugin/webpack'

export default {
  plugins: [
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
  ],
}

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

Nachdem Sie das Plugin zu Ihrer Webpack-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.

Wenn Sie das TanStack Router Plugin mit Webpack für dateibasierte Routen verwenden, verfügt es über einige sinnvolle Standardeinstellungen, 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.