---
id: routing
name: 路由与页面结构
area: frontend
status: concept
---

## 概述

基于 React Router 的单页应用路由体系，含懒加载、受保护路由和移动端页面切换动画。

## 任务卡

### 💭 路由基础配置
- status: concept
- complexity: M
- files: apps/app-one/src/router/index.tsx, apps/app-one/src/router/routes.ts
- acceptance: 使用 react-router-dom v6 createBrowserRouter，配置首页和 404 页，支持代码分割（lazy + Suspense）

### 💭 受保护路由（需登录）
- status: concept
- complexity: M
- files: apps/app-one/src/router/ProtectedRoute.tsx
- acceptance: 未登录访问受保护路由自动跳转登录页，登录后重定向回原目标页，支持角色权限扩展

### 💭 移动端页面切换动画
- status: concept
- complexity: M
- files: apps/app-one/src/router/PageTransition.tsx
- acceptance: 路由切换时有 slide-in/slide-out 动画，与浏览器前进/后退方向一致，不影响首屏性能