43 lines
1.5 KiB
Markdown
43 lines
1.5 KiB
Markdown
# *React-router v6*
|
|
|
|
|
|
|
|
- 前端路由概念
|
|
- *React-router*
|
|
|
|
|
|
|
|
## 前端路由概念
|
|
|
|
早期的时候并不存在前端路由，那个时候只有后端路由，类似于下图：
|
|
|
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-01-120014.png" alt="image-20221101200014494" style="zoom:50%;" />
|
|
|
|
后来，随着单页应用的流行，整个 *Web* 应用之存在一个页面，通过 *JS* 调整模块来显示不同的内容，类似于下图：
|
|
|
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-01-120408.png" alt="image-20221101200407424" style="zoom:50%;" />
|
|
|
|
可以看到，所谓前端路由实际上就是协调当前页面显示什么模块。那么单页应用时代，还存在后端路由么？
|
|
|
|
实际上也是存在的，后端路由负责返回对应的数据，如下图：
|
|
|
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-01-120622.png" alt="image-20221101200622242" style="zoom:50%;" />
|
|
|
|
|
|
|
|
## *React-router*
|
|
|
|
*React-router* 是 *React* 官方所推出的前端路由库，官网地址：*https://reactrouter.com/en/main*
|
|
|
|
目前最新的版本为 *v6* 版本。相比之前的版本，该版本变化略大，加入了许多新的 *Hook*，比如 *useRoutes* 这个 *Hook* 就提供了类似于 *Vue-router* 相似的特性，从而使得使用起来更加的方便。
|
|
|
|
整个官网可以分为几大块：
|
|
|
|
- *Components* 组件
|
|
- *Hooks* 函数
|
|
- *API* 函数
|
|
|
|
整个 *React-router*，我们将写一个学生管理系统，用到什么讲什么。
|
|
|
|
|