Installation mit Rspack

Um dateibasierte Routen mit Rspack oder Rsbuild 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.

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/rspack'

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

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'
import { tanstackRouter } from '@tanstack/router-plugin/rspack'

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

Alternativ können Sie unser Quickstart Rspack/Rsbuild Beispiel klonen und loslegen.

Nachdem Sie das Plugin zu Ihrer Rspack/Rsbuild-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.

Wenn Sie das TanStack Router Plugin mit Rspack (oder Rsbuild) für die dateibasierte Routenverwaltung verwenden, enthält es einige vernünftige 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.