React路由学习
一.History路由和hash路由的区别
1.hash路由在地址栏URL上有#
history路由没有会好看一点(vue因此推荐用history)
2.hash路由支持低版本的浏览器,而history路由是HTML5新增的API。
3.history 在刷新页面时,如果服务器中没有相应的响应或资源,就会出现404(刷新是网络请求,没有后端准备时会报错)。因此,如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就应该是 app 依赖的页面
hash 模式下,仅 ”#“ 之前的内容包含在 http 请求中,对后端来说,即使没有对路由做到全面覆盖,也不会报 404。
4.history运用了浏览器的历史记录栈,之前有back,forward,go方法,之后在HTML5中新增了pushState()和replaceState()方法(需要特定浏览器的支持),它们提供了对历史记录进行修改的功能,不过在进行修改时,虽然改变了当前的URL,但是浏览器不会马上向后端发送请求。
二.switch作用
有
三.Route参数exact、strict、sensitive作用
简单来说是exact(精确匹配), strict(结尾/), sensitive(大小写),以上三个主要负责严格匹配url
1.exact: bool
如果为 true,则只有在位置完全匹配时才能匹配。
path location.pathname exact matches?
/one /one/two true no
/one /one/two false yes
2.strict: bool
如果为 true,则在确定位置是否与当前 URL 匹配时,将考虑位置的路径名后面的斜杠。
path location.pathname matches?
/one/ /one no
/one/ /one/ yes
/one/ /one/two yes
3.sensitive: bool
如果为true, 则路径大小写一致时匹配.不用sensitive默认不区分大小写。
path location.pathname sensitive matches?
/one /one true yes
/One /one true no
/One /one false yes
四.withRouter 的作用
1.作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上。
2.使用场景与原因:
默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push(’/detail’)跳转到对应路由的页面
然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时就可以使用this.props
3.用法:
Ⅰ.import {withRouter} from ‘react-router-dom’ //引入
Ⅱ.在类的上面写@withRouter,或者在导出时写export default withRouter(App);
这样就能使用相关路由方法了,如this.props.history.push(’/detail’)这种,也可以看见history,location,match等属性了