5.1. 路由的简介

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

1. 一个路由就是一个映射关系(key:value)

2. key为路径, value可能是function或component

• 路由分类

  1. 后端路由：

(1) value是function, 用来处理客户端提交的请求。
(2)注册路由： router.get(path, function(req, res))
(3)当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

2. 前端路由：

(1)浏览器端路由，value是component，用于展示页面内容。
(2)注册路由:
(3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
(4）前端路由也要靠BOM 上的 history

5.2 路由的基本使用

1. 明确好界面中的导航区、展示区

2. 导航区的a标签改为Link标签
   Demo

3. 展示区写Route标签进行路径的匹配（在呈现路由组件内容的位置注册路由）

<Routes>
	<Route path="/about" element={<About/>}/>
	<Route path="/home" element={<Home/>}/>
</Routes>

5.3 路由组件与一般组件

1. 写法不同：
   一般组件：
   路由组件：

2. 存放位置不同：
   一般组件：components
   路由组件：pages

3. 接收到的props不同：
   一般组件：写组件标签时传递了什么，就能收到什么
   路由组件：接收到三个固定的属性

5.4 NavLink及其封装

• NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

• 标签体内容是一个特殊的标签属性，可以通过this.props.children获取。因此以下两段代码是等价的。

5.5 Switch

1. 注册路由时用Switch包裹所有路由

2. 通常情况下，path和component是一一对应的关系。

3. Switch可以提高路由匹配效率(单一匹配)。

5.6 路由的模糊匹配与严格匹配

1. 默认使用的是模糊匹配（【输入的路径】必须包含要【匹配的路径】，且顺序要一致）

<MyNavLink to="/about/a/b">Home</MyNavLink>  //模糊匹配
<Route path="/about" component={About}/>

2. 开启严格匹配：

// exact={true}可以简写为exact

3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

5.7 Redirect重定向

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

5.8 向路由组件传递参数

state参数

1. 路由链接(携带参数)：

详情

2. 注册路由(无需声明，正常注册即可)：

3. 接收参数：this.props.location.state
   备注：刷新也可以保留住参数，但回退不行，无法回退到上一个·同级路由

5.9 编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退，而不用路由的和，但还是要注册路由

• this.prosp.history.push()

• this.prosp.history.replace()

• this.prosp.history.goBack()

• this.prosp.history.goForward()

• this.prosp.history.go()

5.10withRouter的使用

1. withRouter可以加工一般组件，让一般组件具备路由组件所特有的API

2. withRouter的返回值是一个新组件。

3. 在一般组件中要用到路由组件的props属性时引入。

import {withRouter} from 'react-router-dom'

//需要暴露
export default withRouter(Header)

5.12 BrowserRouter与HashRouter的区别

• 底层原理不一样： BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
  HashRouter使用的是URL的哈希值。

• path表现形式不一样 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test HashRouter的路径包含#,例如：localhost:3000/#/demo/test

• 刷新后对路由state参数的影响

  • 1）BrowserRouter没有任何影响，因为state保存在history对象中。

  • 2）HashRouter刷新后会导致路由state参数的丢失