文章目录

• 1、SPA
• 2、路由的理解
• • 2.1、什么是路由?
  • 2.2、路由分类
• 3、前端路由的基石 history.js
• 3、react-router-dom
• • 3.1、内置组件
  • 3.2、其它

1、SPA

1. 单页Web应用（single page web application，SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的链接不会刷新页面，只会做页面的局部更新
4. 数据都需要通过ajax请求获取, 并在前端异步展现

2、路由的理解

2.1、什么是路由?

1. 一个路由就是一个映射关系(key:value)
2. key为路径, value可能是function或component

2.2、路由分类

1. 后端路由（后端工程师实现，不幸的是小白是全栈工程师。。。）
   1. 理解： value是function, 用来处理客户端提交的请求
   2. 注册路由： router.get(path, function(req, res))
   3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2. 前端路由（前端工程师实现）
   1. 浏览器端路由，value是component，用于展示页面内容。
   2. 注册路由:
   3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

3、前端路由的基石 history.js

push test1

push test2

replace test3

<= 回退前进 =>

3、react-router-dom

使用路由需要引入react的一个插件库：react-router-dom，专门用来实现一个SPA应用，基于react的项目基本都会用到此库。

安装指令：yarn add react-router-dom@5

由于小白使用yarn安装报了奇怪的错误，使用npm能正常安装，npm安装指令：npm install react-router-dom@5

点击访问 印记中文 - React-Router 中文文档（初学不建议直接阅读）

3.1、内置组件

3.2、其它

1. history 对象

2. match 对象

3. withRouter 函数