⚡

导航模式与路由实现Skill implementing-navigation

这个技能提供全面指导，用于在前后端应用中实现导航系统和路由配置，涵盖菜单、标签、面包屑等导航模式，以及React、Python等框架的客户端和服务器端路由。关键词：导航模式、路由实现、前端开发、后端开发、React、TypeScript、Python、Flask、Django、FastAPI、可访问性、SEO优化。

前端开发 0 次安装 0 次浏览 更新于 3/23/2026

名称: 实现导航 描述: 为前端（React/TypeScript）和后端（Python）实现导航模式和路由，包括菜单、标签、面包屑、客户端路由和服务器端路由配置。在构建导航系统或设置路由时使用。

导航模式与路由实现

目的

这个技能提供全面指导，用于在前后端应用中实现导航系统。它涵盖客户端导航模式（菜单、标签、面包屑）和路由（React Router、Next.js），以及服务器端路由配置（Flask、Django、FastAPI）。

何时使用

使用此技能时：

  • 构建主导航（顶部、侧边、大型菜单）
  • 实现次级导航（面包屑、标签、分页）
  • 设置客户端路由（React Router、Next.js）
  • 配置服务器端路由（Flask、Django、FastAPI）
  • 创建移动导航模式（汉堡菜单、底部导航）
  • 实现键盘可访问导航
  • 构建命令面板或搜索驱动导航
  • 创建多步骤向导或步骤器
  • 确保导航符合 WCAG 2.1 AA 标准

导航决策框架

信息架构 → 导航模式

扁平（1-2 级）      → 顶部导航
深层（3+ 级）       → 侧边导航
电商/大型站点       → 大型菜单
线性流程         → 步骤器/向导
长内容          → 目录
高级用户           → 命令面板
多部分页面    → 标签
大数据集       → 分页

前端导航组件

主导航模式

顶部导航（水平）

  • 适合浅层次结构、营销网站
  • 5-7 个主要链接以控制认知负荷
  • 参见 references/menu-patterns.md 获取实现

侧边导航（垂直）

  • 适合深层次结构、管理面板、仪表板
  • 支持多级嵌套和可折叠部分
  • 参见 references/menu-patterns.md 获取侧边栏模式

大型菜单

  • 适合电商、内容丰富的站点
  • 丰富内容，包括图像和描述
  • 参见 references/menu-patterns.md 获取大型菜单结构

次级导航组件

面包屑

  • 显示层次路径和当前位置
  • 深层次站点和电商必不可少
  • 参见 references/navigation-components.md 获取面包屑模式

标签

  • 内容切换无需页面重载
  • URL 同步以便书签
  • 参见 references/navigation-components.md 获取标签实现

分页

  • 用于搜索结果、产品列表、文章
  • 考虑虚拟化以提高性能
  • 参见 references/navigation-components.md 获取分页模式

客户端路由

React Router（行业标准）

  • 类型安全路由，支持加载器模式
  • 嵌套路由和懒加载支持
  • 参见 references/client-routing.md 获取 React Router 模式

Next.js 应用路由

  • 基于文件的路由，支持 RSC
  • 并行和拦截路由
  • 参见 references/client-routing.md 获取 Next.js 路由

后端路由模式

Python Web 框架

Flask

  • 基于蓝图的组织
  • 路由装饰器和 URL 规则
  • 参见 references/flask-routing.md 获取 Flask 模式

Django

  • URL 配置，支持命名空间
  • 路径转换器和正则表达式模式
  • 参见 references/django-urls.md 获取 Django URL 配置

FastAPI

  • 基于路由器的组织
  • 路径操作和依赖项
  • 参见 references/fastapi-routing.md 获取 FastAPI 路由器

移动导航

触摸设备模式

汉堡菜单

  • 滑出抽屉用于主导航
  • 参见 references/menu-patterns.md 获取移动抽屉

底部导航

  • 3-5 个主要操作，拇指友好
  • 参见 references/menu-patterns.md 获取底部导航

标签栏

  • 水平可滚动标签，支持滑动
  • 适合移动优先应用

可访问性要求

键盘导航

Tab       → 向前移动通过链接
Shift+Tab → 向后移动通过链接
Enter     → 激活链接/按钮
Space     → 激活按钮
方向键 → 在菜单内导航
Escape    → 关闭下拉菜单/模态框

ARIA 模式

用于可访问导航的基本 ARIA 属性：

  • 参见 references/accessibility-navigation.md 获取完整 ARIA 模式
  • 包括地标角色、状态和属性
  • 屏幕阅读器优化技术

焦点管理

  • 可见焦点指示器（最小 2px，对比度 3:1）
  • 模态框和下拉菜单的焦点陷阱
  • 键盘用户的跳过导航链接
  • 参见 references/accessibility-navigation.md 获取焦点模式

实现工具

导航结构管理

生成和验证导航树：

# 验证导航结构
node scripts/validate_navigation_tree.js nav-config.json

# 生成面包屑轨迹
node scripts/calculate_breadcrumbs.js current-path

路由生成（Python）

生成路由配置：

# 生成 Flask/Django/FastAPI 路由
python scripts/generate_routes.py --framework flask --config routes.yaml

代码示例

前端示例

工作导航实现：

  • examples/horizontal-menu.tsx - 响应式顶部导航
  • examples/tab-navigation.tsx - 带 URL 同步的标签
  • examples/mobile-navigation.tsx - 汉堡菜单和抽屉

后端示例

路由配置：

  • examples/flask_routes.py - Flask 蓝图设置
  • examples/django_urls.py - Django URL 模式
  • examples/fastapi_routes.py - FastAPI 路由器组织

导航配置

对于复杂导航结构，使用配置模式：

  • assets/navigation-config-schema.json - 导航树模式
  • assets/route-templates.json - 常见路由模式

使用验证脚本在实现前验证配置。

库推荐

前端路由

React Router 是 React 应用的推荐解决方案：

  • 行业标准，具有优秀的 TypeScript 支持
  • 内置可访问性，支持 NavLink 活动状态
  • 参见 references/library-comparison.md 获取替代方案

组件库

快速开发考虑：

  • 无头 UI 库（Radix UI、React Aria）
  • 默认可访问
  • 适用于任何样式方法

渐进增强

构建无需 JavaScript 的导航：

  • 服务器渲染的 HTML 导航
  • 渐进增强与客户端路由
  • JavaScript 故障的备用方案

性能考虑

  • 懒加载路由组件
  • 预取导航目标
  • 使用基于路由的代码分割
  • 实现导航的加载状态

测试导航

基本导航测试：

  • 键盘导航流程
  • 屏幕阅读器公告
  • 移动触摸交互
  • 路由参数验证
  • 深度链接功能

下一步

  1. 分析信息架构
  2. 选择合适的导航模式
  3. 优先实现可访问性
  4. 添加渐进增强
  5. 跨设备和辅助技术测试

基于具体需求，探索引用的文档文件获取详细实现指南。