Capítulo 57 de 57
File-based routing is configured through a set of options (passed to the Vite/bundler plugin or tsr.config.json) controlling where route files live, how the route tree is generated, and how file names map to route semantics (layouts, index routes, ignored files).
routesDirectory (required): Path to route files, default ./src/routes, relative to cwd; cannot be empty/undefined.generatedRouteTree (required): Output path for the generated route tree, default ./src/routeTree.gen.ts (or .js if disableTypes is true).virtualRouteConfig: Enables the Virtual File Routes feature for programmatically defining the route file structure instead of relying purely on the filesystem.routeFilePrefix / routeFileIgnorePrefix / routeFileIgnorePattern: Control which files in routesDirectory are treated as routes. routeFileIgnorePrefix defaults to -, letting you co-locate non-route files (e.g. posts/-components/Post.tsx) beside routes without them being picked up.routeToken (default route) and indexToken (default index): Identify layout-route and index-route files respectively (e.g. posts.route.tsx or posts/route.tsx both map to /posts as a layout; posts.index.tsx maps to /posts/). Both support regex-based matching (e.g. { regex: "[a-z]+-layout" }) for custom naming conventions, matched against the entire final path segment; escape a literal segment with square brackets, e.g. [home-page].tsx.quoteStyle (default single) and semicolons (default false): Formatting of the generated route tree file and newly scaffolded route files; recommend excluding the generated file from your linter/formatter to avoid conflicts.autoCodeSplitting (default false, bundler-plugin only): Enables automatic code-splitting of non-critical route config; will default to true in the next major version (v2).disableTypes (default false): Skips type generation, emitting .js instead of .ts for the route tree.addExtensions (default false): Controls file extensions on generated import paths, false strips them, true keeps originals, a string (e.g. 'js') replaces the extension, useful for ESM projects requiring .js import specifiers.disableLogging (default false): Silences console output during route generation.routeTreeFileHeader/routeTreeFileFooter: Prepend/append raw content to the generated file; header defaults to /* eslint-disable */, // @ts-nocheck, // noinspection JSUnusedGlobalSymbols.enableRouteTreeFormatting (default true): Formats the generated route tree; disable on large projects to save generation time.tmpDir: Directory for atomic temp-file writes during route/route-tree generation, defaults to .tanstack/tmp (overridable via config or TSR_TMP_DIR env var).{
"routeToken": { "regex": "[a-z]+-layout", "flags": "i" }
}
routeToken to recognize custom layout file naming conventions like dashboard.main-layout.tsx.// Example: replace .tsx/.ts extensions with .js in generated imports
TanStackRouterVite({
addExtensions: 'js',
})
addExtensions for ESM projects that require explicit .js import specifiers.routesDirectory and generatedRouteTree are the only required options; everything else has sensible defaults matching the conventions used throughout the rest of the docs (e.g. route.tsx, index.tsx, - prefix for co-located non-route files).quoteStyle/semicolons are controlled by this config instead.routeToken/indexToken unlock custom file-naming conventions beyond the literal route/index tokens, useful for teams with existing naming standards.addExtensions: 'js' for ESM-only projects where Node.js requires explicit .js extensions on relative imports even when source files are .ts/.tsx.generatedRouteTree output (routeTree.gen.ts) produced by this configuration.