react路由
- 5.1. 路由的简介
- 5.2 路由的基本使用
- 5.3 路由组件与一般组件
- 5.4 NavLink及其封装
- 5.5 Switch
- 5.6 路由的模糊匹配与严格匹配
- 5.7 Redirect重定向
- 5.8 向路由组件传递参数
- 5.9 编程式路由导航
- 5.10withRouter的使用
- 5.12 BrowserRouter与HashRouter的区别
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参数的丢失
-