@tanstack/react-router 1.132.45 → 1.133.3

package/dist/llms/rules/routing.js

@@ -543,16 +543,16 @@ To enable file-based routing, you'll need to be using React with a supported bun
 
 [//]: # 'SupportedBundlersList'
 
-- [Installation with Vite](../installation-with-vite.md)
-- [Installation with Rspack/Rsbuild](../installation-with-rspack.md)
-- [Installation with Webpack](../installation-with-webpack.md)
-- [Installation with Esbuild](../installation-with-esbuild.md)
+- [Installation with Vite](../../installation/with-vite)
+- [Installation with Rspack/Rsbuild](../../installation/with-rspack)
+- [Installation with Webpack](../../installation/with-webpack)
+- [Installation with Esbuild](../../installation/with-esbuild)
 
 [//]: # 'SupportedBundlersList'
 
 When using TanStack Router's file-based routing through one of the supported bundlers, our plugin will **automatically generate your route configuration through your bundler's dev and build processes**. It is the easiest way to use TanStack Router's route generation features.
 
-If your bundler is not yet supported, you can reach out to us on Discord or GitHub to let us know. Till then, fear not! You can still use the [\`@tanstack/router-cli\`](../installation-with-router-cli.md) package to generate your route tree file.
+If your bundler is not yet supported, you can reach out to us on Discord or GitHub to let us know.
 
 # File Naming Conventions
 
@@ -596,445 +596,6 @@ Pathless routes wrap child routes with either logic or a component without requi
 
 To learn more about pathless routes, see the [Routing Concepts - Pathless Routes](../routing-concepts.md#pathless-layout-routes) guide.
 
-# Installation with Esbuild
-
-[//]: # 'BundlerConfiguration'
-
-To use file-based routing with **Esbuild**, you'll need to install the \`@tanstack/router-plugin\` package.
-
-\`\`\`sh
-npm install -D @tanstack/router-plugin
-\`\`\`
-
-Once installed, you'll need to add the plugin to your configuration.
-
-\`\`\`tsx
-// esbuild.config.js
-import { tanstackRouter } from '@tanstack/router-plugin/esbuild'
-
-export default {
-  // ...
-  plugins: [
-    tanstackRouter({
-      target: 'react',
-      autoCodeSplitting: true,
-    }),
-  ],
-}
-\`\`\`
-
-Or, you can clone our [Quickstart Esbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-esbuild-file-based) and get started.
-
-Now that you've added the plugin to your Esbuild configuration, you're all set to start using file-based routing with TanStack Router.
-
-[//]: # 'BundlerConfiguration'
-
-## Ignoring the generated route tree file
-
-If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
-
-Here are some resources to help you ignore the generated route tree file:
-
-- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
-- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
-- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
-
-> [!WARNING]
-> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
-
-You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
-
-\`\`\`json
-{
-  "files.readonlyInclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "files.watcherExclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "search.exclude": {
-    "**/routeTree.gen.ts": true
-  }
-}
-\`\`\`
-
-You can use those settings either at a user level or only for a single workspace by creating the file \`.vscode/settings.json\` at the root of your project.
-
-## Configuration
-
-When using the TanStack Router Plugin with Esbuild for File-based routing, it comes with some sane defaults that should work for most projects:
-
-\`\`\`json
-{
-  "routesDirectory": "./src/routes",
-  "generatedRouteTree": "./src/routeTree.gen.ts",
-  "routeFileIgnorePrefix": "-",
-  "quoteStyle": "single"
-}
-\`\`\`
-
-If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the \`tanstackRouter\` function.
-
-You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).
-
-# Installation with Router CLI
-
-> [!WARNING]
-> You should only use the TanStack Router CLI if you are not using a supported bundler. The CLI only supports the generation of the route tree file and does not provide any other features.
-
-To use file-based routing with the TanStack Router CLI, you'll need to install the \`@tanstack/router-cli\` package.
-
-\`\`\`sh
-npm install -D @tanstack/router-cli
-\`\`\`
-
-Once installed, you'll need to amend your scripts in your \`package.json\` for the CLI to \`watch\` and \`generate\` files.
-
-\`\`\`json
-{
-  "scripts": {
-    "generate-routes": "tsr generate",
-    "watch-routes": "tsr watch",
-    "build": "npm run generate-routes && ...",
-    "dev": "npm run watch-routes && ..."
-  }
-}
-\`\`\`
-
-[//]: # 'AfterScripts'
-[//]: # 'AfterScripts'
-
-You shouldn't forget to _ignore_ the generated route tree file. Head over to the [Ignoring the generated route tree file](#ignoring-the-generated-route-tree-file) section to learn more.
-
-With the CLI installed, the following commands are made available via the \`tsr\` command
-
-## Using the \`generate\` command
-
-Generates the routes for a project based on the provided configuration.
-
-\`\`\`sh
-tsr generate
-\`\`\`
-
-## Using the \`watch\` command
-
-Continuously watches the specified directories and regenerates routes as needed.
-
-**Usage:**
-
-\`\`\`sh
-tsr watch
-\`\`\`
-
-With file-based routing enabled, whenever you start your application in development mode, TanStack Router will watch your configured \`routesDirectory\` and generate your route tree whenever a file is added, removed, or changed.
-
-## Ignoring the generated route tree file
-
-If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
-
-Here are some resources to help you ignore the generated route tree file:
-
-- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
-- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
-- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
-
-> [!WARNING]
-> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
-
-You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
-
-\`\`\`json
-{
-  "files.readonlyInclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "files.watcherExclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "search.exclude": {
-    "**/routeTree.gen.ts": true
-  }
-}
-\`\`\`
-
-You can use those settings either at a user level or only for a single workspace by creating the file \`.vscode/settings.json\` at the root of your project.
-
-## Configuration
-
-When using the TanStack Router CLI for File-based routing, it comes with some sane defaults that should work for most projects:
-
-\`\`\`json
-{
-  "routesDirectory": "./src/routes",
-  "generatedRouteTree": "./src/routeTree.gen.ts",
-  "routeFileIgnorePrefix": "-",
-  "quoteStyle": "single"
-}
-\`\`\`
-
-If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by creating a \`tsr.config.json\` file in the root of your project directory.
-
-[//]: # 'TargetConfiguration'
-[//]: # 'TargetConfiguration'
-
-You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).
-
-# Installation with Rspack
-
-[//]: # 'BundlerConfiguration'
-
-To use file-based routing with **Rspack** or **Rsbuild**, you'll need to install the \`@tanstack/router-plugin\` package.
-
-\`\`\`sh
-npm install -D @tanstack/router-plugin
-\`\`\`
-
-Once installed, you'll need to add the plugin to your configuration.
-
-\`\`\`tsx
-// 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,
-        }),
-      ],
-    },
-  },
-})
-\`\`\`
-
-Or, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-rspack-file-based) and get started.
-
-Now that you've added the plugin to your Rspack/Rsbuild configuration, you're all set to start using file-based routing with TanStack Router.
-
-[//]: # 'BundlerConfiguration'
-
-## Ignoring the generated route tree file
-
-If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
-
-Here are some resources to help you ignore the generated route tree file:
-
-- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
-- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
-- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
-
-> [!WARNING]
-> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
-
-You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
-
-\`\`\`json
-{
-  "files.readonlyInclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "files.watcherExclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "search.exclude": {
-    "**/routeTree.gen.ts": true
-  }
-}
-\`\`\`
-
-You can use those settings either at a user level or only for a single workspace by creating the file \`.vscode/settings.json\` at the root of your project.
-
-## Configuration
-
-When using the TanStack Router Plugin with Rspack (or Rsbuild) for File-based routing, it comes with some sane defaults that should work for most projects:
-
-\`\`\`json
-{
-  "routesDirectory": "./src/routes",
-  "generatedRouteTree": "./src/routeTree.gen.ts",
-  "routeFileIgnorePrefix": "-",
-  "quoteStyle": "single"
-}
-\`\`\`
-
-If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the \`tanstackRouter\` function.
-
-You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).
-
-# Installation with Vite
-
-[//]: # 'BundlerConfiguration'
-
-To use file-based routing with **Vite**, you'll need to install the \`@tanstack/router-plugin\` package.
-
-\`\`\`sh
-npm install -D @tanstack/router-plugin
-\`\`\`
-
-Once installed, you'll need to add the plugin to your Vite configuration.
-
-\`\`\`ts
-// 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(),
-    // ...
-  ],
-})
-\`\`\`
-
-Or, you can clone our [Quickstart Vite example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-file-based) and get started.
-
-> [!WARNING]
-> If you are using the older \`@tanstack/router-vite-plugin\` package, you can still continue to use it, as it will be aliased to the \`@tanstack/router-plugin/vite\` package. However, we would recommend using the \`@tanstack/router-plugin\` package directly.
-
-Now that you've added the plugin to your Vite configuration, you're all set to start using file-based routing with TanStack Router.
-
-[//]: # 'BundlerConfiguration'
-
-## Ignoring the generated route tree file
-
-If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
-
-Here are some resources to help you ignore the generated route tree file:
-
-- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
-- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
-- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
-
-> [!WARNING]
-> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
-
-You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
-
-\`\`\`json
-{
-  "files.readonlyInclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "files.watcherExclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "search.exclude": {
-    "**/routeTree.gen.ts": true
-  }
-}
-\`\`\`
-
-You can use those settings either at a user level or only for a single workspace by creating the file \`.vscode/settings.json\` at the root of your project.
-
-## Configuration
-
-When using the TanStack Router Plugin with Vite for File-based routing, it comes with some sane defaults that should work for most projects:
-
-\`\`\`json
-{
-  "routesDirectory": "./src/routes",
-  "generatedRouteTree": "./src/routeTree.gen.ts",
-  "routeFileIgnorePrefix": "-",
-  "quoteStyle": "single"
-}
-\`\`\`
-
-If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the \`tanstackRouter\` function.
-
-You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).
-
-# Installation with Webpack
-
-[//]: # 'BundlerConfiguration'
-
-To use file-based routing with **Webpack**, you'll need to install the \`@tanstack/router-plugin\` package.
-
-\`\`\`sh
-npm install -D @tanstack/router-plugin
-\`\`\`
-
-Once installed, you'll need to add the plugin to your configuration.
-
-\`\`\`tsx
-// webpack.config.ts
-import { tanstackRouter } from '@tanstack/router-plugin/webpack'
-
-export default {
-  plugins: [
-    tanstackRouter({
-      target: 'react',
-      autoCodeSplitting: true,
-    }),
-  ],
-}
-\`\`\`
-
-Or, you can clone our [Quickstart Webpack example](https://github.com/TanStack/router/tree/main/examples/react/quickstart-webpack-file-based) and get started.
-
-Now that you've added the plugin to your Webpack configuration, you're all set to start using file-based routing with TanStack Router.
-
-[//]: # 'BundlerConfiguration'
-
-## Ignoring the generated route tree file
-
-If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
-
-Here are some resources to help you ignore the generated route tree file:
-
-- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
-- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
-- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
-
-> [!WARNING]
-> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
-
-You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
-
-\`\`\`json
-{
-  "files.readonlyInclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "files.watcherExclude": {
-    "**/routeTree.gen.ts": true
-  },
-  "search.exclude": {
-    "**/routeTree.gen.ts": true
-  }
-}
-\`\`\`
-
-You can use those settings either at a user level or only for a single workspace by creating the file \`.vscode/settings.json\` at the root of your project.
-
-## Configuration
-
-When using the TanStack Router Plugin with Webpack for File-based routing, it comes with some sane defaults that should work for most projects:
-
-\`\`\`json
-{
-  "routesDirectory": "./src/routes",
-  "generatedRouteTree": "./src/routeTree.gen.ts",
-  "routeFileIgnorePrefix": "-",
-  "quoteStyle": "single"
-}
-\`\`\`
-
-If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the \`tanstackRouter\` function.
-
-You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).
-
 # Route Matching
 
 Route matching follows a consistent and predictable pattern. This guide will explain how route trees are matched.