一、SPA理解
- 单页面Web应用
single page web application SPA
- 整个应用只有一个完整的页面
- 点击页面的链接不会刷新页面,只会做页面的局部更新
- 数据都需要通过ajax请求获取,并在前端异步展现
二、路由理解
- 前端路由:
- 浏览器端路由,value是component,用于展示页面内容
- 注册路由:<Router path="/test" componnet={Test}>
- 工作过程:当浏览器的path编程/test时,当前路由组件就会变成Test组件 - 后段路由:
- value是function,用来处理客户端提交的请求
- router.get(path,function(req,res))
- 工作过程:当node接受一个请求时,根据请求路径找到匹配的路由,调用路由中的函数来处理请求,返回相应的数据
三、安装
React Router被拆分成三个包:
- react-router (提供核心的路由组件与函数)
- react-router-dom (运行在浏览器,前端人员使用)
- react-router-native
yarn add react-router-dom --save
四、react-router-dom 相关组件
组件 | 作用 |
---|---|
BrowserRouter | 约定模式为history,使用HTML5提供的historyAPI来保存UI和URL的同步 |
HashRouter | 约定模式为hash,使用URL的hash来保持UI和URL的同步 |
NavLink | 声明式跳转,还可以约定路由激活状态 |
Link | 声明式跳转 没有激活状态 |
Redirect | 路由重定向 |
Route | 匹配、展示 |
Switch | 排他性匹配 |
Prompt | 后置守卫 |
withRouter | 把不是通过路由切换过来的组件中(一般组件),将history、location、match三个对象传入props对象上 |
五、组件结构
BrowserRouter|HashRouter
- 根组件(App)
- NavLink|Link
- Route
- Redirect
- 子组件
- NavLink|Link
- Route
- 子组件
六、路由组件相关属性
BrowserRouter
属性 | 作用 |
---|---|
basename | string类型,所有位置的基本URL,如果你的应用是从服务器上的子目录提供的,则需要将其设置为子目录。格式正确的基本名称应以斜杠开头,但不能以斜杠结尾 |
getUserConfirmation | function类型,确认导航功能。默认使用window.confirm |
forceRefresh | 布尔值,是否调整强制刷新,模拟旧式服务器渲染 |
Route
属性 | 作用 |
---|---|
path | 类型:string/object , 没有path属性的Router总是会匹配 |
exact | 类型:boolean , 为true时要求全路径匹配,默认false模糊匹配 |
component | 类型:function/r、ReactElement , 在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染 |
render | 类型:function , 内联渲染和包装组件,要求要返回目标组件的调用 |
Link
属性 | 作用 |
---|---|
to | 类型:string/{pathname,search,hash}, 要跳转的路径或地址 |
replace | 类型:boolean , 是否替换历史记录 |
NanLink
属性 | 作用 |
---|---|
to | 类型:string/object, 要跳转的路径或地址 |
replace | 类型:boolean , 是否替换历史记录 |
activeClassName | 类型:string , 当元素被选择时,设置选中样式,默认为active |
activeStyle | 类型:object , 当元素被选中时,设置选中样式 |
exact | 类型:boolean , 严格模式匹配 |
Switch
- 通常情况下,path和component是一一对应的关系。
- Switch可以提高路由匹配效率(单一匹配)。
- 用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配(场景:侧边栏和面包屑,引导选项卡等
属性 | 类型 |
---|---|
location | string/object |
children | node |
Redirect
一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由
属性 | 作用 |
---|---|
from | 类型:string, 来自 |
to | 类型:string/object, 去向 |
push | 类型:boolean, 添加历史记录 |
exact | 类型:boolean, 严格匹配 |
sensitive | 类型:boolean 区分大小写 |
七、向路由组件传递参数
params参数
//路由链接携带参数
<Link to='/demo/test/tom/18'}>详情</Link>
//注册路由(声明接受)
<Route path="/demo/test/:name/:age" component={Test}/>
//接收参数:
this.props.match.params
search参数
//路由链接携带参数
<Link to='/demo/test?name=tom&age=18'}>详情</Link>
//注册路由(无需声明,正常注册即可)
<Route path="/demo/test" component={Test}/>
//接收参数:
this.props.location.search
state参数
//路由链接携带参数
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
//注册路由(无需声明,正常注册即可)
<Route path="/demo/test" component={Test}/>
//接收参数:
this.props.location.state
编程式跳转
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
this.prosp.history.push()
this.prosp.history.replace()
his.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()
八、BrowserRouter与HashRouter的区别
- 底层原理不一样:
-BrowserRouter
使用的是H5的history API,不兼容IE9及以下版本。
-HashRouter
使用的是URL的哈希值。 - path表现形式不一样
-BrowserRouter
的路径中没有#,如:localhost:3000/demo/test
-HashRouter
的路径包含#,例如:localhost:3000/#/demo/test - 刷新后对路由state参数的影响
-BrowserRouter
没有任何影响,因为state保存在history对象中。
-HashRouter
刷新后会导致路由state参数的丢失.
HashRouter
可以用于解决一些路径错误相关的问题
九、总结
路由组件与一般组件
- 写法不同:
- 一般组件:
- 路由组件: - 存放位置不同:
- 一般组件在components文件夹
- 路由组件在pages - 接收到的props不同:
- 一般组件:写组件标签时传递了什么,就能收到什么
- 路由组件:接收到三个固定的属性:
history:
- go: ƒ go(n)
- goBack: ƒ goBack()
- goForward: ƒ goForward()
- push: ƒ push(path, state)
- replace: ƒ replace(path, state)
location:
- pathname: “/about”
2. search: “”
3. state: undefined
match:
- params: {}
- path: “/about”
- url: “/about”
解决多级路径刷新页面样式丢失的问题
- public/index.html 中 引入样式时不写 ./ 写 / (常用)
- public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% (常用)
- 使用HashRouter
路由的严格匹配与模糊匹配
- 默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】,且顺序要一致)
- 开启严格匹配:
- 严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由
嵌套路由
- 注册子路由时要写上父路由的path值
- 路由的匹配是按照注册路由的顺序进行的