垦荒学园
  • 中文

      • 快速上手

      本章用一个最小页面串起路由、loader 和 Server Function。

      创建首页

      src/routes/index.tsx：

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

export const Route = createFileRoute('/')({
  component: HomePage,
})

function HomePage() {
  return <main>Hello TanStack Start</main>
}

      createFileRoute('/') 会把文件路由与类型系统关联起来。

      添加 loader

      export const Route = createFileRoute('/')({
  loader: async () => {
    return { message: 'Loaded during SSR or navigation' }
  },
  component: HomePage,
})

function HomePage() {
  const data = Route.useLoaderData()
  return <main>{data.message}</main>
}

      loader 可在 SSR、预取或客户端导航时运行，返回值由 Route.useLoaderData() 类型推导。

      添加 Server Function

      import { createServerFn } from '@tanstack/react-start'

const getServerTime = createServerFn({ method: 'GET' }).handler(async () => {
  return { now: new Date().toISOString() }
})

export const Route = createFileRoute('/')({
  loader: async () => getServerTime(),
  component: HomePage,
})

      Server Function 在服务端运行，但可被 loader、组件事件和其他 Server Function 调用。

      第一个任务清单

      1. 创建项目并启动 dev server
      2. 添加首页路由
      3. 添加 loader 并读取数据
      4. 添加 createServerFn
      5. 打开网络面板比较 SSR 与客户端导航

      下一步