ReactRouter
- 一、概念
- 二、创建路由开发环境
- 三、快速开始
- 四、抽象路由模块
- 实际开发中的router配置
- 五、路由导航
- 1.声明式导航
- 2.编程式导航
- 六、路由导航传参
- 1.searchParams 传参
- 2.params 传参
- 七、嵌套路由配置
- 八、默认二级路由
- 九、404路由配置
- 十、俩种路由模式
一、概念
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染
二、创建路由开发环境
- 创建项目并安装所有依赖
npx create-react-app react-router-pro
npm i - 安装最新的 ReactRouter包
npm i react-router-dom - 启动项目
npm run start
三、快速开始
需求：创建一个可以切换登录页和文章页的路由系统
在src/index.js中添加或修改以下内容：
四、抽象路由模块
实际开发中的router配置
/src/router/index.js
index.js
五、路由导航
路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信
1.声明式导航
声明式导航是指通过在模版中通过
<Link/>组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行
语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可
登录页跳转到文章页：
2.编程式导航
编程式导航是指通过
useNavigate钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活
语法说明：通过调用navigate方法传入地址path实现跳转
六、路由导航传参
1.searchParams 传参
login页面：
文章article:
2.params 传参
login页面
router->index.js
acrticle页面:
七、嵌套路由配置
在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由
点击左侧展示不同的二级展示页面：
router/index.js
layout/index.js
八、默认二级路由
当访问的是一级路由时，默认的二级路由组件可以得到渲染，只需要在二级路由的位置去掉path，设置index属性为true
这样设置后，访问一级路由时也会展示二级路由的内容
九、404路由配置
场景：当浏览器输入url的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染
实现步骤：
-
准备一个NotFound组件
-
在路由表数组的末尾，以*号作为路由path配置路由
十、俩种路由模式
各个主流框架的路由常用的路由模式有俩种，
history模式和hash模式,ReactRouter分别由 createBrowerRouter 和createHashRouter 函数负责创建
router/index.js
更换成哈希模式：
