基于文件的路由

TanStack Router 的大部分文档都是为基于文件的路由编写的，旨在帮助您更详细地了解如何配置基于文件的路由以及其工作原理的技术细节。虽然基于文件的路由是配置 TanStack Router 的首选和推荐方式，但如果您愿意，也可以使用基于代码的路由。

基于文件的路由是一种使用文件系统配置路由的方式。您可以使用一系列代表应用程序路由层次结构的文件和目录来定义路由，而不是通过代码定义路由结构。这带来了许多好处：

• 简单性：基于文件的路由在视觉上直观且易于理解，无论是新手还是经验丰富的开发者。
• 组织性：路由的组织方式反映了应用程序的 URL 结构。
• 可扩展性：随着应用程序的增长，基于文件的路由使添加新路由和维护现有路由变得容易。
• 代码分割：基于文件的路由允许 TanStack Router 自动对路由进行代码分割以获得更好的性能。
• 类型安全：基于文件的路由通过生成和管理路由的类型链接来提高类型安全性的上限，这在基于代码的路由中可能是一个繁琐的过程。
• 一致性：基于文件的路由为您的路由强制执行一致的结构，使维护和更新应用程序以及从一个项目迁移到另一个项目变得更容易。

虽然目录长期以来一直用于表示路由层次结构，但基于文件的路由引入了一个额外的概念，即在文件名中使用 . 字符来表示路由嵌套。这允许您避免为少数深度嵌套的路由创建目录，并继续为更广泛的路由层次结构使用目录。让我们看一些例子！

目录可用于表示路由层次结构，这对于将多个路由组织成逻辑组以及减少大量深度嵌套路由组的文件名长度很有用。

请参见下面的示例：

扁平路由使您能够使用 . 来表示路由嵌套级别。

当您有大量独特的深度嵌套路由并希望避免为每个路由创建目录时，这会很有用：

请参见下面的示例：

100% 的目录或扁平路由结构极不可能最适合您的项目，这就是为什么 TanStack Router 允许您将扁平路由和目录路由混合在一起，在合适的地方创建一个使用两全其美的路由树：

请参见下面的示例：

扁平路由和目录路由都可以混合在一起，在合适的地方创建一个使用两全其美的路由树。

要开始使用基于文件的路由，您需要配置项目的打包器以使用 TanStack Router 插件或 TanStack Router CLI。

要启用基于文件的路由，您需要使用 React 和受支持的打包器。查看您的打包器是否在下面的配置指南中列出。

• 使用 Vite 安装
• 使用 Rspack/Rsbuild 安装
• 使用 Webpack 安装
• 使用 Esbuild 安装

当通过受支持的打包器之一使用 TanStack Router 的基于文件的路由时，我们的插件将通过打包器的开发和构建过程自动生成您的路由配置。这是使用 TanStack Router 路由生成功能的最简单方法。

如果您的打包器尚未受支持，您可以在 Discord 或 GitHub 上联系我们告知。���那之前，不要担心！您仍然可以使用 @tanstack/router-cli 包来生成您的路由树文件。