React页面路由

前端路由和后端路由

       在web开发早期的年代里，前端的功能远不如现在这么强大，一直是后端路由占据主导地位。服务端渲染就是在浏览器请求页面URL时，（每次切换页面时，浏览器都会刷新页面）服务端按照不同的URL地址与不同的html + css + 后端数据 之间的映射，直接将我们需要的HTML文本组装好，并返回给浏览器，这个HTML文本被浏览器解析之后，不需要经过JavaScript脚本的执行，可直接构建出完整的DOM树并展示页面中。

前端路由介绍

       随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是单页Web应用(Single Page Web Application,SPA))的兴起，前端路由系统随之开始流行。

1、用户的角度

        前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：

• 记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；
• 可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；

2、作为开发者

       要实现这两个功能，我们需要做到：

• 改变url且不让浏览器向服务器发出请求；
• 监测 url 的变化；
• 截获 url 地址，并解析出需要的信息来匹配路由规则。

匹配模式

模糊匹配模式

● 默认情况下, React路由是模糊匹配模式
● 模糊匹配规则：只要pathname以path开头就会匹配成功，对应的组件就会被渲染出来。

精确匹配

● 给 Route组件添加exact属性，让其变为精确匹配模式
● 精确匹配：只有当path和 pathname完全匹配时才会展示该路由，严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由。

路由的执行过程

1. 点击Link组件(a标签）会修改浏览器地址栏中的url
2. React路由监听到地址栏url的变化。
3. Reat路由内部遍历所有 Route组件，使用路由规则(path)与 pathname进行匹配。
4. 当路由规则(path)能够匹配地址栏中的pathname时，就展示渲染该 Route组件的内容

hash模式

         这里的 hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash也称作锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。
         由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。

window.location.hash = 'qq' // 设置 url 的 hash，会在当前url后加上 '#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashchange', function(){
   
    // 监听hash变化，点击浏览器的前进后退会触发
})

history模式

         已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？
         首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。
         其次，hash 的传参是基于 url的，如果要传递复杂的数据，会有体积的限制，而history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

   window.history.pushState(state, title, url)
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。

window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但