AgentSkillsCN

frontend-routing-tanstack-router

使用TanStack Router设计页面切换与数据加载。固定认证路径、路由设计、loader、search params、错误边界类型。关键词：TanStack Router、路由、loader、认证、哈希路由

SKILL.md
--- frontmatter
name: frontend-routing-tanstack-router
description: 'TanStack Router を使って画面遷移とデータロードを設計する。認証導線、ルート設計、loader、search params、エラーバウンダリの型を固定する。キーワード: TanStack Router, routing, loader, auth, hash routing'
license: MIT

TanStack Router Skill

目的

画面追加時のルーティング設計を統一し、認証/権限/データロードをブレなく実装する。

標準ルート（例）

  • •/：ダッシュボード（今日の打刻状態）
  • •/time-entries：一覧（社員本人は自分、管理者は全体）
  • •/approvals：承認者向け（差戻し含む）
  • •/reports/:yearMonth：PDF/集計ビュー

設計ルール

  • •loaderでprefetchするQuery一覧はこのdocsに従う
  • •search params は型付きで扱う（年月、社員、状態フィルタ）
  • •認証/権限が必要なルートは共通ガードに寄せる

必須アウトプット

  • •ルートマップ
  • •search param 定義（yearMonth 等）
  • •画面ごとの loader で読む Query 一覧

依頼例

  • •「承認画面のルート設計と search param を決めたい」
  • •「loader で prefetch する Query 設計を提案して」

References