Skip to content

iamzwq/tsrouter-with-react-query

Repository files navigation

核心技术栈

前端框架与路由

  • React 19.1.0 - 最新版本的 React
  • @tanstack/react-router - 类型安全的路由管理
  • TypeScript - 静态类型检查

状态管理与数据获取

  • @tanstack/react-query - 服务端状态管理和数据获取
  • Jotai - 原子化状态管理
  • Axios - HTTP 客户端

UI 组件库与样式

  • Material-UI (MUI) - React 组件库
  • Emotion - CSS-in-JS 样式解决方案
  • TailwindCSS 4.x - 原子化 CSS 框架
  • Motion - 动画库

表单处理

  • React Hook Form - 高性能表单库
  • Zod - 模式验证库
  • @hookform/resolvers - 表单验证集成

数据可视化

  • ECharts - 图表库

构建工具与开发环境

  • Vite 6.x - 现代化构建工具
  • SWC - 快速的 TypeScript/JavaScript 编译器
  • PNPM - 高效的包管理器

项目结构特点

模块化架构

src/ ├── modules/ # 业务模块 (auth, form, pokemon) ├── components/ # 通用组件 ├── hooks/ # 自定义 Hooks ├── utils/ # 工具函数 ├── routes/ # 路由配置 ├── theme/ # 主题配置 └── common/ # 公共配置

路由组织

  • 使用文件系统路由
  • 支持认证路由 (_authenticated/)
  • 支持分组路由 ((auth)/, (error)/)

开发工具配置

代码质量

  • ESLint - 代码检查
  • Prettier - 代码格式化
  • Husky - Git hooks
  • Commitlint - 提交信息规范
  • Lint-staged - 暂存文件检查

开发体验

  • React Query Devtools - 开发调试工具
  • SVG 支持 - 通过 vite-plugin-svgr
  • 路径别名 - ~ 指向 src 目录
  • 热重载 - Vite 开发服务器

项目特色功能

  1. 类型安全的路由 - 使用 TanStack Router 实现完全类型安全的路由
  2. 现代化状态管理 - 结合 React Query 和 Jotai
  3. 组件化设计 - 丰富的自定义组件库
  4. 工具函数库 - 完整的工具函数集合
  5. 主题系统 - 支持深色/浅色模式切换
  6. 版本检查 - 自动版本更新检测

部署配置

  • 配置了 GitHub Pages 部署
  • 支持基础路径配置
  • 生产环境优化(代码分割、压缩等)

React 组件精选

About

基于React 19 + TypeScript + MUI + Tanstank React Router + React Query 的工程化后台管理搭建

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published