📄 tanstack/router/latest/docs/framework/react/installation/with-router-cli

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.

npm install -D @tanstack/router-cli


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 && ..."
  }
}


{
  "scripts": {
    "generate-routes": "tsr generate",
    "watch-routes": "tsr watch",
    "build": "npm run generate-routes && ...",
    "dev": "npm run watch-routes && ..."
  }
}

You shouldn't forget to ignore the generated route tree file. Head over to the 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.

tsr generate


tsr generate

Using the watch command
-----------------------

Continuously watches the specified directories and regenerates routes as needed.

Usage:

tsr watch


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:

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
  }
}


{
  "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"
}


{
  "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.

You can find all the available configuration options in the File-based Routing API Reference .

Edit on GitHub

Esbuild

Migrate from React Router

Partners Become a Partner

scarf analytics