数据加载与 Loader

// src/routes/posts/$postId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params, context, location }) => {
    // params: { postId: string } — 路径参数
    // context: 路由上下文（auth 等）
    const post = await fetchPost(params.postId)
    return { post }
  },
  component: PostDetail,
})

function PostDetail() {
  // loader 的返回值类型自动推断
  const { post } = Route.useLoaderData()
  // post 类型完全安全 ✅

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

// 从其他组件访问
import { useLoaderData, getRouteApi } from '@tanstack/react-router'

const routeApi = getRouteApi('/posts/$postId')
function PostTitle() {
  const { post } = routeApi.useLoaderData()
  return <h1>{post.title}</h1>
}

export const Route = createFileRoute('/posts/$postId')({
  staleTime: 30_000, // 30 秒内重复访问使用缓存，不重新请求
  loader: async ({ params }) => {
    return fetchPost(params.postId)
  },
})

// router.tsx
const router = createRouter({
  routeTree,
  defaultStaleTime: 10_000, // 全局默认 10 秒
})

const router = createRouter({
  routeTree,
  defaultPreloadStaleTime: 60_000, // 预加载的数据缓存 1 分钟
})

export const Route = createFileRoute('/posts/')({
  validateSearch: z.object({
    page: fallback(z.number(), 1).default(1),
    sort: z.enum(['newest', 'oldest']).default('newest'),
  }),
  // 只有 page 变化时才重新加载，sort 变化不触发
  loaderDeps: ({ search }) => ({
    page: search.page,
  }),
  loader: async ({ deps }) => {
    // deps: { page: number }
    return fetchPosts({ page: deps.page })
  },
})

export const Route = createFileRoute('/dashboard')({
  beforeLoad: async ({ context, location }) => {
    // 1. 认证守卫
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: '/login',
        search: { redirect: location.href },
      })
    }

    // 2. 预加载权限数据到 context
    const permissions = await fetchPermissions(context.auth.userId)
    return { permissions } // 返回的数据会合并到 context
  },
  loader: async ({ context }) => {
    // context 中已有 permissions
    return fetchDashboardData(context.permissions)
  },
})

// 父路由
beforeLoad: async () => {
  const org = await fetchOrganization()
  return { org } // context.org 对子路由可用
}

// 子路由
loader: async ({ context }) => {
  // context.org ✅ 可用
  return fetchProjects(context.org.id)
}

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    // 模拟慢速加载
    await new Promise((r) => setTimeout(r, 2000))
    return fetchPost(params.postId)
  },
  component: PostDetail,
  pendingComponent: PostSkeleton, // loader 执行中显示
})

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    const res = await fetch(`/api/posts/${params.postId}`)
    if (res.status === 404) throw notFound()
    if (!res.ok) throw new Error('加载失败')
    return res.json()
  },
  component: PostDetail,
  errorComponent: ({ error, reset }) => (
    <div className="error-state">
      <h2>加载失败</h2>
      <p>{error.message}</p>
      <button onClick={reset}>重试</button>
    </div>
  ),
})

import { notFound } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  loader: async ({ params }) => {
    const post = await fetchPost(params.postId)
    if (!post) throw notFound() // 触发 notFoundComponent
    return { post }
  },
  component: PostDetail,
  notFoundComponent: () => (
    <div>
      <h2>文章不存在</h2>
      <Link to="/posts">返回列表</Link>
    </div>
  ),
})

// 子路由访问父路由的 loader 数据
export const Route = createFileRoute('/posts/$postId/comments')({
  loader: async ({ params, context }) => {
    // 不能直接访问父 loader 数据！
    // 需要通过 context 或独立请求
    return fetchComments(params.postId)
  },
})

function PostDetail() {
  const { post } = Route.useLoaderData()
  const navigate = useNavigate()

  const refresh = () => {
    // 方式一：重新导航到当前路由（触发 loader 重新执行）
    navigate({ to: '.', replace: true })
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <button onClick={refresh}>刷新</button>
    </div>
  )
}

// 方式二：使用 useRouter
import { useRouter } from '@tanstack/react-router'

function RefreshButton() {
  const router = useRouter()

  return (
    <button onClick={() => router.invalidate()}>
      清除所有缓存并刷新
    </button>
  )
}

type LoaderFn<TContext, TParams, TSearch, TDeps> = (opts: {
  params: TParams          // 路径参数（解析后）
  context: TContext        // 路由上下文
  location: ParsedLocation // 当前 URL 信息
  search: TSearch          // 验证后的搜索参数
  deps: TDeps              // loaderDeps 返回值
  cause: 'enter' | 'stay'  // 触发原因
  preload: boolean         // 是否为预加载
  navigate: NavigateFn     // 导航函数
  abortController: AbortController // 导航取消时的信号
}) => MaybePromise<unknown>