使用 Router CLI 安装

警告

如果您不使用支持的打包器，才应该使用 TanStack Router CLI。该 CLI 只支持生成路由树文件，不提供任何其他功能。

要使用 TanStack Router CLI 进行基于文件的路由，您需要安装 @tanstack/router-cli 包。

npm install -D @tanstack/router-cli

npm install -D @tanstack/router-cli

安装完成后，您需要修改 package.json 中的 scripts，以便 CLI watch 和 generate 文件。

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

如果您使用 TypeScript，还应该在 tsconfig.json 中添加以下选项

json

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

这样，您就可以开始使用 TanStack Router 的基于文件的路由了。

您不应忘记忽略生成的路由树文件。请前往“忽略生成的路由树文件”部分了解更多信息。

安装 CLI 后，可以通过 tsr 命令使用以下命令

使用 generate 命令

根据提供的配置生成项目的路由。

tsr generate

tsr generate

使用 watch 命令

持续监视指定目录并在需要时重新生成路由。

用法

tsr watch

tsr watch

启用基于文件的路由后，每当您在开发模式下启动应用程序时，TanStack Router 都会监视您配置的 routesDirectory，并在添加、删除或更改文件时生成路由树。

忽略生成的路由树文件

如果您的项目配置了 linter 和/或 formatter，您可能希望忽略生成的路由树文件。此文件由 TanStack Router 管理，因此不应由您的 linter 或 formatter 更改。

以下是一些帮助您忽略生成的路由树文件的资源

警告

如果您正在使用 VSCode，您可能会在重命名路由后遇到路由树文件意外打开（并带有错误）的情况。

您可以通过在 VSCode 设置中将文件标记为只读来防止这种情况。我们建议还使用以下设置将其从搜索结果和文件监视器中排除

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

您可以在用户级别或通过在项目根目录创建 .vscode/settings.json 文件，仅为一个工作区使用这些设置。

配置

当使用 TanStack Router CLI 进行基于文件的路由时，它带有一些默认设置，适用于大多数项目。

json

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single"
}

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single"
}

如果这些默认设置适用于您的项目，您根本无需进行任何配置！但是，如果您需要自定义配置，可以通过在项目目录的根目录中创建 tsr.config.json 文件来实现。

由于您使用的是 Solid，因此应将以下内容添加到您的 tsr.config.json 文件中

json

{
  "target": "solid"
}

{
  "target": "solid"
}

您可以在[文件路由 API 参考](/router/latest/docs/api/file-based-routing)中找到所有可用的配置选项。

使用 generate 命令

使用 watch 命令

忽略生成的路由树文件

配置

订阅 Bytes

订阅 Bytes