docs-i18n 0.8.1 → 0.8.3

package/template/content/router/en/overview.md

@@ -0,0 +1,74 @@
+---
+title: TanStack Router Overview
+description: Type-safe routing for React applications with first-class search param support
+---
+
+# TanStack Router
+
+TanStack Router is a fully type-safe React router with built-in data fetching, stale-while-revalidate caching, and first-class search param APIs.
+
+## Why TanStack Router?
+
+Traditional routers have limited type safety and treat search params as an afterthought. TanStack Router was built from the ground up with type safety and search params as first-class citizens.
+
+## Features
+
+- **100% Type-Safe** — Route paths, params, search params, and loaders are all fully typed
+- **Built-in Search Params** — First-class search param management with validation
+- **Data Loading** — Integrated route loaders with stale-while-revalidate caching
+- **Code Splitting** — Automatic route-based code splitting
+- **Nested Layouts** — Nested routes with shared layouts
+- **Devtools** — Dedicated devtools for debugging routes and cache
+
+## Basic Example
+
+```tsx
+import {
+  createRouter,
+  createRoute,
+  createRootRoute,
+} from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <div>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+      </nav>
+      <Outlet />
+    </div>
+  ),
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => <div>Welcome Home!</div>,
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: () => <div>About</div>,
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({ routeTree })
+```
+
+## Type-Safe Search Params
+
+```tsx
+const productsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/products',
+  validateSearch: (search) => ({
+    page: Number(search.page ?? 1),
+    filter: (search.filter as string) ?? '',
+    sort: (search.sort as 'asc' | 'desc') ?? 'asc',
+  }),
+  component: ProductsPage,
+})
+```

package/template/content/router/en/quick-start.md

@@ -0,0 +1,88 @@
+---
+title: Quick Start
+description: Get up and running with TanStack Router in minutes
+---
+
+# Quick Start
+
+## File-Based Routing
+
+The easiest way to get started is with file-based routing. Create your routes directory:
+
+```
+src/
+  routes/
+    __root.tsx
+    index.tsx
+    about.tsx
+    posts/
+      index.tsx
+      $postId.tsx
+```
+
+### Root Route
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/posts">Posts</Link>
+      </nav>
+      <Outlet />
+    </>
+  ),
+})
+```
+
+### Index Route
+
+```tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: () => <div>Welcome Home!</div>,
+})
+```
+
+### Dynamic Route
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+  component: PostPage,
+})
+
+function PostPage() {
+  const post = Route.useLoaderData()
+  return <div>{post.title}</div>
+}
+```
+
+## Data Loading
+
+TanStack Router supports route-level data loading with caching:
+
+```tsx
+export const Route = createFileRoute('/posts')({
+  loader: async () => {
+    const posts = await fetch('/api/posts').then((r) => r.json())
+    return { posts }
+  },
+  component: PostsPage,
+})
+```
+
+> [!NOTE]
+> Route loaders run in parallel for nested routes, ensuring the fastest possible data loading.

package/template/content/router/ja/installation.md

@@ -0,0 +1,57 @@
+---
+title: インストール
+description: プロジェクトに TanStack Router をインストールする方法
+---
+
+# インストール
+
+## パッケージのインストール
+
+```bash
+npm install @tanstack/react-router
+```
+
+```bash
+pnpm add @tanstack/react-router
+```
+
+```bash
+yarn add @tanstack/react-router
+```
+
+```bash
+bun add @tanstack/react-router
+```
+
+## Vite プラグイン（推奨）
+
+ファイルベースルーティングと自動ルート生成で最高の体験を得るために、Vite プラグインをインストールしてください：
+
+```bash
+npm install -D @tanstack/router-plugin
+```
+
+`vite.config.ts` に追加します：
+
+```ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [TanStackRouterVite(), react()],
+})
+```
+
+## Devtools
+
+ルートデバッグ用の devtools をインストールします：
+
+```bash
+npm install @tanstack/router-devtools
+```
+
+## 必要要件
+
+- React 18+
+- TypeScript 5.0+（強く推奨）

package/template/content/router/ja/overview.md

@@ -0,0 +1,78 @@
+---
+title: TanStack Router 概要
+description: Reactアプリケーション向けの型安全なルーティングライブラリ
+---
+
+# TanStack Router
+
+TanStack Routerは、Reactアプリケーション向けに設計された完全型安全なルーティングライブラリです。ナビゲーションからサーチパラメータまで、エンドツーエンドの型安全性を提供します。
+
+## なぜTanStack Routerを選ぶのか？
+
+従来のReactルーティングライブラリは型安全性の面で不十分でした。ルートパスは文字列、パラメータは`any`型、サーチパラメータはまったく検証されません。TanStack Routerはこれらの問題を根本から解決します。
+
+## 主な特徴
+
+- **100% 型安全** — リンク、ナビゲーション、パラメータ、サーチパラメータすべてが完全に型チェックされる
+- **ファーストクラスのサーチパラメータ** — URLサーチパラメータが検証され型付けされる
+- **組み込みデータローディング** — ルートレベルのデータプリフェッチ
+- **ファイルベースルーティング** — ファイルシステムから型安全なルートツリーを自動生成
+- **ネストされたレイアウト** — ルートのネストで共有レイアウトを作成
+- **コード分割** — ルートごとのコード分割を標準サポート
+
+## クイック例
+
+```tsx
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Link,
+  Outlet,
+} from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <div>
+      <nav>
+        <Link to="/">ホーム</Link>
+        <Link to="/about">アバウト</Link>
+      </nav>
+      <Outlet />
+    </div>
+  ),
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => <h1>ホームページへようこそ</h1>,
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: () => <h1>私たちについて</h1>,
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+const router = createRouter({ routeTree })
+```
+
+## TanStack Queryとの連携
+
+TanStack RouterはTanStack Queryと相性が抜群です。ルートの`loader`でQueryを使用してデータをプリフェッチできます：
+
+```tsx
+const userRoute = createRoute({
+  path: '/users/$userId',
+  loader: ({ params, context }) =>
+    context.queryClient.ensureQueryData({
+      queryKey: ['user', params.userId],
+      queryFn: () => fetchUser(params.userId),
+    }),
+})
+```
+
+> [!NOTE]
+> TanStack Routerは単独で使用することも、TanStack Startと組み合わせてフルスタックフレームワークとして使用することもできます。

package/template/content/router/zh-hans/guides/routing-concepts.md

@@ -0,0 +1,131 @@
+---
+title: 路由概念
+description: 了解 TanStack Router 的核心路由概念
+---
+
+# 路由概念
+
+TanStack Router 建立在几个核心概念之上，使其功能强大且灵活。理解这些概念将帮助您构建更好的应用。
+
+## 路由树
+
+TanStack Router 使用路由树来定义应用的结构。路由可以嵌套以创建布局和层级结构：
+
+```tsx
+import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router'
+
+const rootRoute = createRootRoute({
+  component: RootLayout,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: HomePage,
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: AboutPage,
+})
+
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+
+const router = createRouter({ routeTree })
+```
+
+## 基于文件的路由
+
+对于大多数应用，TanStack Router 通过插件支持基于文件的路由。您的文件结构即是路由结构：
+
+```
+app/
+  routes/
+    __root.tsx        → 根布局
+    index.tsx         → /
+    about.tsx         → /about
+    posts.tsx         → /posts（布局）
+    posts.index.tsx   → /posts/
+    posts.$postId.tsx → /posts/:postId
+```
+
+> [!NOTE]
+> 基于文件的路由由 `@tanstack/router-plugin` 包驱动，它在构建时自动生成路由树。
+
+## 搜索参数
+
+TanStack Router 将搜索参数视为一等公民，提供完整的类型安全：
+
+```tsx
+const productsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/products',
+  validateSearch: (search: Record<string, unknown>) => {
+    return {
+      page: Number(search.page) || 1,
+      filter: (search.filter as string) || '',
+      sort: (search.sort as 'asc' | 'desc') || 'asc',
+    }
+  },
+  component: ProductsPage,
+})
+
+function ProductsPage() {
+  const { page, filter, sort } = productsRoute.useSearch()
+
+  return (
+    <div>
+      <p>页码：{page}，筛选：{filter}，排序：{sort}</p>
+    </div>
+  )
+}
+```
+
+## 数据加载
+
+路由可以定义在渲染前获取数据的加载器：
+
+```tsx
+const postRoute = createRoute({
+  getParentRoute: () => postsRoute,
+  path: '$postId',
+  loader: async ({ params }) => {
+    const post = await fetchPost(params.postId)
+    return { post }
+  },
+  component: PostPage,
+})
+
+function PostPage() {
+  const { post } = postRoute.useLoaderData()
+  return <article>{post.title}</article>
+}
+```
+
+| 功能 | 描述 |
+|---|---|
+| 路由树 | 具有父子关系的层级路由定义 |
+| 基于文件的路由 | 从文件系统自动生成路由 |
+| 搜索参数 | 带验证的类型安全 URL 搜索参数 |
+| 数据加载 | 在路由渲染前预取数据 |
+| 等待状态 | 导航期间的内置加载指示器 |
+| 错误边界 | 按路由的错误处理 |
+
+## 路径参数
+
+路径中的动态段以 `$` 为前缀：
+
+```tsx
+// 单个参数
+'/posts/$postId'
+
+// 多个参数
+'/users/$userId/posts/$postId'
+
+// 通配符/全匹配
+'/files/$'
+```
+
+> [!WARNING]
+> 与其他路由器不同，TanStack Router 不使用 `:` 作为动态段前缀。始终使用 `$` 作为前缀。

package/template/content/router/zh-hans/installation.md

@@ -0,0 +1,57 @@
+---
+title: 安装
+description: 如何在项目中安装 TanStack Router
+---
+
+# 安装
+
+## 安装依赖包
+
+```bash
+npm install @tanstack/react-router
+```
+
+```bash
+pnpm add @tanstack/react-router
+```
+
+```bash
+yarn add @tanstack/react-router
+```
+
+```bash
+bun add @tanstack/react-router
+```
+
+## Vite 插件（推荐）
+
+为了获得最佳的基于文件路由和自动路由生成体验，请安装 Vite 插件：
+
+```bash
+npm install -D @tanstack/router-plugin
+```
+
+然后将其添加到 `vite.config.ts` 中：
+
+```ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [TanStackRouterVite(), react()],
+})
+```
+
+## 开发工具
+
+安装开发工具用于路由调试：
+
+```bash
+npm install @tanstack/router-devtools
+```
+
+## 环境要求
+
+- React 18+
+- TypeScript 5.0+（强烈推荐）

package/template/content/router/zh-hans/overview.md

@@ -0,0 +1,81 @@
+---
+title: TanStack Router 概述
+description: 为 React 应用打造的类型安全路由库
+---
+
+# TanStack Router
+
+TanStack Router 是一个为 React 应用设计的全类型安全路由库。它将路由提升为一等公民，提供从导航到搜索参数的端到端类型安全。
+
+## 为什么选择 TanStack Router？
+
+传统的 React 路由库在类型安全方面存在不足。路由路径是字符串，参数是 `any` 类型，搜索参数完全未经验证。TanStack Router 从根本上解决了这些问题。
+
+## 核心特性
+
+- **100% 类型安全** — 链接、导航、参数和搜索参数都经过完整的类型检查
+- **一等搜索参数** — URL 搜索参数经过验证和类型化，如同路径参数一样
+- **内置数据加载** — 路由级别的数据预取，支持 stale-while-revalidate
+- **文件路由** — 通过文件系统结构自动生成类型安全的路由树
+- **嵌套布局** — 路由可嵌套以创建共享布局
+- **代码分割** — 开箱即用的按路由代码分割
+
+## 快速示例
+
+```tsx
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Link,
+  Outlet,
+} from '@tanstack/react-router'
+
+// 定义根路由
+const rootRoute = createRootRoute({
+  component: () => (
+    <div>
+      <nav>
+        <Link to="/">首页</Link>
+        <Link to="/about">关于</Link>
+      </nav>
+      <Outlet />
+    </div>
+  ),
+})
+
+// 定义子路由
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => <h1>欢迎来到首页</h1>,
+})
+
+const aboutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/about',
+  component: () => <h1>关于我们</h1>,
+})
+
+// 构建路由树
+const routeTree = rootRoute.addChildren([indexRoute, aboutRoute])
+const router = createRouter({ routeTree })
+```
+
+## 与 TanStack Query 配合使用
+
+TanStack Router 与 TanStack Query 完美配合。在路由的 `loader` 中使用 Query 来预取数据：
+
+```tsx
+const userRoute = createRoute({
+  path: '/users/$userId',
+  loader: ({ params, context }) =>
+    context.queryClient.ensureQueryData({
+      queryKey: ['user', params.userId],
+      queryFn: () => fetchUser(params.userId),
+    }),
+})
+```
+
+> [!NOTE]
+> TanStack Router 可以独立使用，也可以与 TanStack Start 结合使用以获得完整的全栈框架体验。

package/template/content/router/zh-hans/quick-start.md

@@ -0,0 +1,88 @@
+---
+title: 快速开始
+description: 几分钟内上手 TanStack Router
+---
+
+# 快速开始
+
+## 基于文件的路由
+
+最简单的入门方式是使用基于文件的路由。创建您的路由目录：
+
+```
+src/
+  routes/
+    __root.tsx
+    index.tsx
+    about.tsx
+    posts/
+      index.tsx
+      $postId.tsx
+```
+
+### 根路由
+
+```tsx
+// src/routes/__root.tsx
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <nav>
+        <Link to="/">首页</Link>
+        <Link to="/about">关于</Link>
+        <Link to="/posts">文章</Link>
+      </nav>
+      <Outlet />
+    </>
+  ),
+})
+```
+
+### 索引路由
+
+```tsx
+// src/routes/index.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: () => <div>欢迎回来！</div>,
+})
+```
+
+### 动态路由
+
+```tsx
+// src/routes/posts/$postId.tsx
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params }) => {
+    return fetchPost(params.postId)
+  },
+  component: PostPage,
+})
+
+function PostPage() {
+  const post = Route.useLoaderData()
+  return <div>{post.title}</div>
+}
+```
+
+## 数据加载
+
+TanStack Router 支持带缓存的路由级数据加载：
+
+```tsx
+export const Route = createFileRoute('/posts')({
+  loader: async () => {
+    const posts = await fetch('/api/posts').then((r) => r.json())
+    return { posts }
+  },
+  component: PostsPage,
+})
+```
+
+> [!NOTE]
+> 嵌套路由的路由加载器会并行运行，确保最快的数据加载速度。

package/template/content/table/docs.config.json

@@ -0,0 +1,18 @@
+{
+  "sections": [
+    {
+      "label": "Getting Started",
+      "children": [
+        { "label": "Overview", "to": "overview" },
+        { "label": "Installation", "to": "installation" },
+        { "label": "Quick Start", "to": "quick-start" }
+      ]
+    },
+    {
+      "label": "Guides",
+      "children": [
+        { "label": "Column Definitions", "to": "guides/column-definitions" }
+      ]
+    }
+  ]
+}