（二）黑马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. 创建路由
- 创建路由
- 登录
- 文章
- 找不到页面
2. 导入路由到index.tsx
- 导入路由到index页面
1.2 路由导航
1. 声明式
- 使用
Link关键字直接跳转
2. 命令式
- 关键：使用
const navigate = useNavigate()
1.3 传参
1. searchParams传参
- 需要跳转的页传递参数这里是Login组件
- 在Article用到参数的页面，获取参数
2. Params传参
- 跳转页面使用param传参语法