File-Based Routing API Reference

TanStack Router's file-based routing is quite flexible and can be configured to suit your project's needs.

The following options are available for configuring the file-based routing:

• routesDirectory (required)
• generatedRouteTree (required)
• virtualRouteConfig
• routeFilePrefix
• routeFileIgnorePrefix
• indexToken
• routeToken
• quoteStyle
• semicolons
• apiBase
• autoCodeSplitting
• disableTypes
• addExtensions
• disableLogging
• routeTreeFileHeader
• routeTreeFileFooter
• disableManifestGeneration

This is the path to the directory where the route files are located, relative to the cwd (current working directory).

By default, the value is set to the following and cannot be set to an empty string or undefined.

./src/routes

./src/routes

This is the path to the file where the generated route tree will be saved, relative to the cwd (current working directory).

By default, the value is set to the following and cannot be set to an empty string or undefined.

./src/routeTree.gen.ts

./src/routeTree.gen.ts

If the disableTypes is set to true, the generated route tree will be saved with the .js extension instead of .ts.

This option is used to configure the Virtual File Routes feature. See the "Virtual File Routes" guide for more information.

By default, this value is set to undefined.

This option is used to ignore specific files and directories in the route directory. This can be useful if you want to "opt-in" certain files or directories that you do not want to be considered for routing.

By default, this value is set to -.

When using this option, it allows you have structures like this where it let's you co-located related files that are not route files:

src/routes
├── posts
│   ├── -components  // Ignored
│   │   ├── Post.tsx
│   ├── index.tsx
│   ├── route.tsx

src/routes
├── posts
│   ├── -components  // Ignored
│   │   ├── Post.tsx
│   ├── index.tsx
│   ├── route.tsx

This option is used to ignore specific files and directories in the route directory. It can be used in regular expression format. For example, .((css|const).ts)|test-page will ignore files / directories with names containing .css.ts, .const.ts or test-page.

By default, this value is set to undefined.

This option is used to identify route files in the route directory. This means that only files that start with this prefix will be considered for routing.

By default, this value is set to `` and as such all files in the route directory will be considered for routing.

As mentioned in the Routing Concepts guide, a layout route is rendered at the specified path, and the child routes are rendered within the layout route. The routeToken is used to identify the layout route file in the route directory.

By default, this value is set to route.

🧠 the following filenames would equal the same runtime URL:

src/routes/posts.tsx -> /posts
src/routes/posts.route.tsx -> /posts
src/routes/posts/route.tsx -> /posts

src/routes/posts.tsx -> /posts
src/routes/posts.route.tsx -> /posts
src/routes/posts/route.tsx -> /posts

As mentioned in the Routing Concepts guide, an index route is a route that is matched when the URL path is exactly the same as the parent route. The indexToken is used to identify the index route file in the route directory.

By default, this value is set to index.

🧠 the following filenames would equal the same runtime URL:

src/routes/posts.index.tsx -> /posts/
src/routes/posts/index.tsx -> /posts/

src/routes/posts.index.tsx -> /posts/
src/routes/posts/index.tsx -> /posts/

When your generated route tree is generated and when you first create a new route, those files will be formatted with the quote style you specify here.

By default, this value is set to single.

When your generated route tree is generated and when you first create a new route, those files will be formatted with semicolons if this option is set to true.

By default, this value is set to false.

As a framework, TanStack Start supports the concept of API routes. This option configures the base path for API routes.

By default, this value is set to /api.

This feature is only available is you are using the TanStack Router Bundler Plugin.

This option is used to enable automatic code-splitting for non-critical route configuration items. See the "Automatic Code-Splitting" guide for more information.

By default, this value is set to false.

This option is used to disable generating types for the route tree.

If set to true, the generated route tree will not include any types and will be written as a .js file instead of a .ts file.

By default, this value is set to false.

This option adds file extensions to the route names in the generated route tree.

By default, this value is set to false.

This option turns off the console logging for the route generation process.

By default, this value is set to false.

This option let's you prepend content to the start of the generated route tree file.

By default, this value is set to:

[
  "/* eslint-disable */",
  "// @ts-nocheck",
  "// noinspection JSUnusedGlobalSymbols"
]

[
  "/* eslint-disable */",
  "// @ts-nocheck",
  "// noinspection JSUnusedGlobalSymbols"
]

This option let's you append content to the end of the generated route tree file.

By default, this value is set to:

[]

[]

TanStack Start leverages the generatedRouteTree file to also store a JSON tree which allows Start to easily traverse the available route tree to understand the routing structure of the application. This JSON tree is saved at the end of the generated route tree file.

This option allows you to disable the generation of the manifest.

By default, this value is set to false.