ReactRouter

• 快速开始
• 什么是前端路由：一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染
• 创建路由开发环境：采用 CRA 创建项目的方式进行基础环境配置
1. 创建项目并安装所有依赖：pnpm create react-app react-router-pro
2. 安装最新的 ReactRouter 包：pnpm add react-router-dom
3. 启动项目：pnpm start
• 需求：创建一个可以切换登录页和文章页的路由系统
• /login：登录
• /article：文章
• 步骤：
1. 创建 router 实例对象并且配置路由对应关系
2. 路由绑定

• 抽象路由模块
• src/page/
• Login
• Article
• src/router（引入组件配置 path-component）
• 应用入口文件渲染 RouterProvider（注入 router 实例）

• 路由导航
• 路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信
• 声明式导航
• 声明式导航是指通过在模版中通过 <Link/> 组件描述出要跳转到哪里，比如后台管理系统的左侧菜单通常使用这种方式进行
• 语法说明：通过给组件的 to 属性指定要跳转到路由 path，组件会被渲染为浏览器支持的 a 链接，如果需要传参直接通过字符串拼接的方式拼接参数即可
• 编程式导航
• 编程式导航是指通过 useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活
• 语法说明：通过调用 navigate 方法传入地址 path 实现跳转

• 导航传参
• searchParams 传参
• 发送方
• 接收方
• params 传参
• 发送方
• 接收方

• 嵌套路由配置
• 在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由
• 实现步骤：
1. 使用 children 属性配置路由嵌套关系
2. 使用 <Outlet/> 组件配置二级路由渲染位置

• 默认二级路由
• 当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉 path，设置 index 属性为 true

• 404 路由配置
• 场景：当浏览器输入 url 的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染
• 实现步骤：
1. 准备一个 NotFound 组件
2. 在路由表数组的末尾，以 * 号作为路由 path 配置路由

• 两种路由模式
• 各个主流框架的路由常用的路由模式有两种，history 模式和 hash 模式，ReactRouter 分别由 createBrowserRouter 和 createHashRouter 函数负责创建

路由模式	URL 中路径的表现	底层原理	部署时是否需要特殊配置
history	/xxx	history 对象 + pushState 事件	需要
hash	/#/xxx	监听 hashChange 事件	不需要

• 案例演示：react-router-pro

记账本案例

• 环境搭建：使用 CRA 创建项目，并安装必要依赖，包括下列基础包
1. Redux 状态管理：@reduxjs/toolkit、 react-redux
2. 路由：react-router-dom
3. 时间处理：dayjs
4. class 类名处理：classnames
5. 移动端组件库：antd-mobile
6. 请求插件：axios

• 配置别名路径@
1. 路径解析配置(webpack)，把 @/ 解析为 src/：使用 craco 插件
2. 路径联想配置(VsCode)，VS Code 在输入 @/ 时，自动联想出来对应的 src/ 下的子级目录：通过 jsconfig.json 配置
• 路径解析配置
• CRA 本身把 webpack 配置包装到了黑盒里无法直接修改，需要借助一个插件：craco
• 配置步骤：
1. 安装 craco：pnpm add -D @craco/craco
2. 项目根目录下创建配置文件：craco.config.js
3. 配置文件中添加路径解析配置
4. 包文件中配置启动和打包命令
• 联想路径配置
• VS Code 的联想配置，需要我们在项目目录下添加 jsconfig.json 文件，加入配置之后 VS Code 会自动联想提示
• 配置步骤：
1. 根目录下新增配置文件：jsconfig.json
2. 添加路径提示配置

• 数据 Mock 实现
• 在前后端分类的开发模式下，前端可以在没有实际后端接口的支持下先进行接口数据的模拟，进行正常的业务功能开发
• 市场常见的 Mock 方式
1. 前端直接写假数据：纯静态，没有服务
2. 自研 Mock 平台：成本太高
3. json-server 等工具：有服务，成本低
• json-server 实现数据 Mock
• json-server 是一个 node 包，可以在不到 30 秒内获得零编码的完整的 Mock 服务
• 实现步骤：
1. 项目中安装 json-server：pnpm add -D json-server
2. 准备一个 JSON 文件
3. 添加启动命令
4. 访问接口进行测试

• 整体路由设计
• Layout（一级路由）
• Month（二级路由）
• Year（二级路由）
• New（一级路由）

• antD-mobile 主题定制
• 定制方案：
1. 全局定制：整个应用范围内的组件都生效
2. 局部定制：只在某些元素内部的组件生效

• Redux 管理账目列表
• 基于RTK管理账目列表
• RTK
• State：billList
• reducer：setBillList
• 异步 action
• component
• dispatch 异步 action

• TabBar 功能实现
• 需求：使用 antD 的 TabBar 标签栏组件进行布局以及路由的切换
• 实现方式：看文档（找到相似 Demo → 复制代码跑通 → 定制化修改）
1. 静态布局实现
2. 切换路由实现

• 案例演示：react-bill