完成后你将能够
能为 QueryClient、会话或服务定义类型化 Router Context，并理解它与服务端授权的边界。
根路由声明最小契约
createRootRouteWithContext 让路由树要求 createRouter 提供相同依赖。把跨 loader、beforeLoad 和路由组件共享的稳定依赖放在这里，不要把任意组件状态都塞进全局 context。
import { createRootRouteWithContext } from '@tanstack/react-router'
import type { QueryClient } from '@tanstack/react-query'
type RouterContext = {
queryClient: QueryClient
session: { permissions: readonly string[] }
}
export const Route = createRootRouteWithContext<RouterContext>()({
component: RootDocument,
})让父路由追加派生事实
beforeLoad 的返回值会合并进该路由及其子路由的 context。父级只计算一次 canEditIssues，子 loader 不必重复解释权限字符串，也能得到完整类型推断。
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/_workspace')({
beforeLoad: ({ context }) => ({
canEditIssues: context.session.permissions.includes('issues:write'),
}),
})把本课变成可验证的能力
Router Context 的依赖在创建 Router 时注入，并在 beforeLoad 与 Loader 中保持类型安全。
把 QueryClient 和一个 auth 读取接口加入根 Context，在受保护路由中消费它们。
删除一个必需依赖时 Router 创建应产生类型错误；恢复后 Loader 能读到同一实例。
- 在路由模块顶层调用 React Hook。
- 用 any 绕过 Router Context 的注册类型。