2021-08-15

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等属性了