react路由
5.1. 路由的简介
单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取,
并在前端异步展现，且是单页面、多组件
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
-
路由分类
- 后端路由：
(1) value是function, 用来处理客户端提交的请求。
(2)注册路由： router.get(path, function(req, res))
(3)当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
- 前端路由：
(1)浏览器端路由，value是component，用于展示页面内容。
(2)注册路由:
(3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
(4）前端路由也要靠BOM 上的 history
5.2 路由的基本使用
-
明确好界面中的导航区、展示区
-
导航区的
a标签改为Link标签
Demo -
展示区写Route标签进行路径的匹配（在呈现路由组件内容的位置注册路由）
<Routes>
<Route path="/about" element={<About/>}/>
<Route path="/home" element={<Home/>}/>
</Routes>
5.3 路由组件与一般组件
-
写法不同：
一般组件：
路由组件： -
存放位置不同：
一般组件：components
路由组件：pages -
接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性
5.4 NavLink及其封装
-
NavLink可以实现路由链接的高亮，通过
activeClassName指定样式名 -
标签体内容是一个特殊的标签属性，可以通过
this.props.children获取。因此以下两段代码是等价的。
5.5 Switch
-
注册路由时用Switch包裹所有路由
-
通常情况下，path和component是一一对应的关系。
-
Switch可以提高路由匹配效率(单一匹配)。
5.6 路由的模糊匹配与严格匹配
- 默认使用的是模糊匹配（【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
<MyNavLink to="/about/a/b">Home</MyNavLink> //模糊匹配
<Route path="/about" component={
About}/>
- 开启严格匹配：
// exact={true}可以简写为exact
- 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
5.7 Redirect重定向
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
5.8 向路由组件传递参数
state参数
- 路由链接(携带参数)：
详情
-
注册路由(无需声明，正常注册即可)：
-
接收参数：
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的使用
-
withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
-
withRouter的返回值是一个新组件。
-
在一般组件中要用到路由组件的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参数的丢失
-
