---
id: ecosystem-map
track: learn
product: ecosystem
locale: zh-CN
order: 1
revision: 2
sourceCheckedOn: "2026-08-03"
versionRange: "Start ^1 / Router ^1 / Query ^5"
verifiedAgainst: "@tanstack/react-start@1.168.34 + @tanstack/react-router@1.170.18 + @tanstack/react-query@5.101.4"
contentModel: 2
prerequisites:
  - "会写基本 React 组件"
  - "了解 TypeScript 类型"
sourceRefs:
  - "https://tanstack.com/start/latest/docs/framework/react/overview"
  - "https://tanstack.com/router/latest/docs/overview"
  - "https://tanstack.com/query/latest/docs/framework/react/overview"
---

# TanStack 不是一个框架

> 先别急着安装依赖。用一张地图理解 Start、Router 和 Query 如何各司其职。

**Outcome:** 能根据项目问题选择正确的 TanStack 工具。

## 从问题出发

TanStack 是一组可组合的工具。Router 管理页面、URL 和路由生命周期；Query 管理来自服务端的异步数据；Start 把 Router 扩展成包含 SSR、Server Functions 和部署边界的全栈框架。它们不是三套互相竞争的方案。

## 三句话选型

只做 SPA 且已有后端，从 Router 开始。需要 SSR、服务端函数或同仓全栈代码，从 Start 开始。页面中的远程数据出现缓存、重试、失效或乐观更新需求时，加入 Query。

> **Note:** 绝大多数 Start 项目同时也是 Router 项目。

## 实践与验证

### 完成检查点

能用一句话分别说明 Start、Router 与 Query 的职责，并指出它们可以同时存在于同一个应用中。

### 动手练习

为一个已有 React 项目的三个需求选型：增加页面导航、缓存远程列表、增加 SSR，并写下选择理由。

### 验证方法

选择结果应分别为 Router、Query、Start，并能说出远程状态与 URL 状态的所有权差异。

### 常见错误

- 把 Query 当成通用客户端状态库。
- 认为使用 Start 后不再需要理解 Router。

## Official sources

- https://tanstack.com/start/latest/docs/framework/react/overview
- https://tanstack.com/router/latest/docs/overview
- https://tanstack.com/query/latest/docs/framework/react/overview