深入解析：（二）黑马React（导航/账单项目）

---

文章目录

• 项目地址
• 一、路由
• • 1.1 基础路由
  • • 1. 创建路由
    • 2. 导入路由到index.tsx
  • 1.2 路由导航
  • • 1. 声明式
    • 2. 命令式
  • 1.3 传参
  • • 1. searchParams传参
    • 2. Params传参
  • 1.4 嵌套路由
  • • 1. 嵌套路由配置
    • 2. 默认二级路由
• 二、账单项目
• • 2.1 月份弹窗
  • • 1. 时间切换区域
  • 2.2 点击确定账单日期变化
  • • 1. 创建存储时间的state
    • 2. 处理时间函数
  • 2.3 账单数据按月处理
  • • 1. 获取所有月份数据并分组
    • 2. 获取确认月份的所有数据
    • 3. 计算确认月数据
  • 2.4 月份账单初始话显示
  • • 1. 使用useEeffect初始化数据
  • 2.5 日账单
  • • 1. 按照日对月份数据分组
    • 2. 将key和数据传递个子组件
    • 3. 日账单组件接收传来的参数
  • 2.6 记账页面
  • • 1. 支出和收入高亮
    • 2. 支出页面和收入页面数据切换
    • 3. 支出和收入数据获取
    • 4. RTK提交数据

---

项目地址

• 教程作者：
• 教程地址：

• 代码仓库地址：

• 所用到的框架和插件：

dbt
airflow

一、路由

1.1 基础路由

• 所有的页面
  

1. 创建路由

• 创建路由
  1. 登录
  2. 文章
  3. 找不到页面
     

2. 导入路由到index.tsx

• 导入路由到index页面
  

1.2 路由导航

1. 声明式

• 使用Link 关键字直接跳转
  

2. 命令式

• 关键：使用 const navigate = useNavigate()
  

1.3 传参

1. searchParams传参

1. 需要跳转的页传递参数这里是Login组件

2. 在Article用到参数的页面，获取参数

2. Params传参

1. 跳转页面使用param传参语法