定义
浏览器中一种处理访问先后关系的机制，简单的说就是允许我们在不同页面之间跳转，然后记录我们的跳转关系，能原路退回去的机制
包含三个主要的内容
1. 路由历史
它是一个栈的形式的数据结构，通过入栈和出栈的方式记录我们页面的访问过程
2. 跳转
这个是负责我们不同页面之间的跳转动作的，并可以传递参数
3.事件
这个事件就是用来我们打开新页面或者退回到上一个页面时触发的逻辑
常见的 Router
1.页面 Router
这个是真正的页面跳转，跳转之后整个页面会按照的新的路径重新加载，然后回退的时候也是整个页面重新渲染
window.location.href= "http://baidu.com/";
2.Hash Router
这种路由在跳转的时候只有路径的哈希值在发生变化，而页面并没有重新加载，只是跳转到了当前页面哈希指定的状态，后退的时候也是跳到了上一个哈希状态，整个页面不会刷新，最早做单页应用的时候就是通过哈希的路由来模拟浏览器自带的路由 ，是我们实现单页应用使用的最早的技术，它的兼容性页不错
window.location.href= "#test";
3.H5 Router
它在 JS 的 history 对象提供了新的方法，用来手动的在路由历史里创建一个新值，点击浏览器后退按钮时，还可以通过 H5 Rounter 提供的事件处理截获浏览器后退按钮触发的事件，保证在模拟路由的同时不做页面的跳转，这样才能完成单页应用的要求，它相对哈希路由而言，能操作整个路径，它的功能是和 哈希路由类似的，只不过哈希路由操作的是哈希，而这个 H5 Rounter 它既能操作哈希，也能操作路径，但因为它是 H5 提出来的，所以它的兼容性相比哈希路由差一些
推进一个状态
history.pushState('test【名字】','title','#test【path】')
React-Router
1.<BrowserRouter> 就是用 H5 Router 实现的
<HashRouter> 使用 Hash Router 实现的
2.<Route> 路由规则
我们哪个路径应该对应哪个组件或者对应哪个渲染方式，就是依靠 <Router> 定义的
3.<Switch> 路由选项
解决了路由多次匹配的问题，假设我们在 Router 写了好几个 Route，然后这几个 Route 会一一匹配，最终匹配到头才结束，假设没有 switch 把这些 Route 都包起来的话，这里 Route 只有第一个符合规则的 Route 能被匹配到
4.<Link/>、<NavLink> 跳转导航
即跳转标签，和我们在 HTML 中的<a> 标签类似，并且它真是被解析的时候就是一个 <a> 标签
5.<Redirect> 做路由自动跳转的
它的作用是匹配到某些路径的时候，可以自动跳转到另外一个路径
网友评论