使用 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` 中的脚本，以便 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 参考” 中找到所有可用的配置选项。

使用 generate 命令

使用 watch 命令

忽略生成的路由树文件

配置

订阅 Bytes

订阅 Bytes