【react全家桶】react路由
5.1. 路由的简介
单页Web应用( page web ,SPA)。整个应用只有一个完整的页面。击页面中的链接不会刷新页面,只会做页面的局部更新。数据都需要通过ajax请求获取,
并在前端异步展现,且是单页面、多组件
一个路由就是一个映射关系(key:value)
key为路径, value可能是或
(1) value是, 用来处理客户端提交的请求。
(2)注册路由: .get(path, (req, res))
(3)当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由:
(1)浏览器端路由,value是,用于展示页面内容。
(2)注册路由:
(3)工作过程:当浏览器的path变为/test时, 当前路由组件就会变为Test组件
(4)前端路由也要靠BOM 上的
5.2 路由的基本使用
明确好界面中的导航区、展示区
导航区的a标签改为Link标签
Demo
展示区写Route标签进行路径的匹配(在呈现路由组件内容的位置注册路由)
}/>}/>
5.3 路由组件与一般组件
写法不同:
一般组件:
路由组件:
存放位置不同:
一般组件:
路由组件:pages
接收到的props不同:
一般组件:写组件标签时传递了什么,就能收到什么
路由组件:接收到三个固定的属性
5.4 及其封装 5.5
注册路由时用包裹所有路由
通常情况下,path和是一一对应的关系。
可以提高路由匹配效率(单一匹配)。
5.6 路由的模糊匹配与严格匹配 默认使用的是模糊匹配(【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
<MyNavLink to="/about/a/b">Home</MyNavLink> //模糊匹配
<Route path="/about" component={About}/>
开启严格匹配:
// exact={true}可以简写为exact
严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由 5.7 重定向
一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到指定的路由
5.8 向路由组件传递参数
state参数
路由链接(携带参数):
详情
注册路由(无需声明,正常注册即可):
接收参数:this.props..state
备注:刷新也可以保留住参数,但回退不行,无法回退到上一个·同级路由
5.9 编程式路由导航
借助this.prosp.对象上的API对操作路由跳转、前进、后退,而不用路由的和,但还是要注册路由
5.的使用
可以加工一般组件,让一般组件具备路由组件所特有的API
的返回值是一个新组件。
在一般组件中要用到路由组件的props属性时引入。
import {withRouter} from 'react-router-dom'
//需要暴露
export default withRouter(Header)
5.12 与的区别