路由树

路由树

TanStack Router 使用嵌套的路由树来将 URL 与正确的组件树匹配以进行渲染。

为了构建路由树，TanStack Router 支持以下两种方式

基于文件的路由
基于代码的路由

两种方法都支持完全相同的核心特性和功能，但是基于文件的路由需要更少的代码就能达到相同或更好的效果。因此，基于文件的路由是配置 TanStack Router 的首选和推荐方式，并且大多数文档都是从基于文件的路由的角度编写的。

有关基于代码的路由文档，请参阅《基于代码的路由》指南。

嵌套路由是一个强大的概念，它允许你使用 URL 来渲染嵌套的组件树。例如，给定 URL /blog/posts/123，你可以创建一个如下所示的路由层级结构

tsx

├── blog
│   ├── posts
│   │   ├── $postId

├── blog
│   ├── posts
│   │   ├── $postId

并渲染一个如下所示的组件树

tsx

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

让我们采用这个概念并将其扩展到更大的站点结构，但现在使用文件名

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _pathlessLayout/
│   ├── route-a.tsx
├── ├── route-b.tsx
├── files/
│   ├── $.tsx

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _pathlessLayout/
│   ├── route-a.tsx
├── ├── route-b.tsx
├── files/
│   ├── $.tsx

上面是一个有效的路由树配置，可以与 TanStack Router 一起使用！基于文件的路由有很多强大的功能和约定需要解析，所以让我们稍微分解一下。

路由树配置

路由树可以使用几种不同的方式配置

请务必查看上面每种路由树类型的完整文档链接，或者直接进入下一节开始使用基于文件的路由。

路由树

路由树

路由树配置

订阅 Bytes

订阅 Bytes