核心原理

路由描述了 URL 与 UI 之间的映射关系。映射是单项的，URL 变化引起 UI 更新

• 带有 hash 的路由：地址栏 URL 中有#,即 hash 值,兼容性高
• 不带 hash 的路由：地址栏没有，部分浏览器不支持

一个完整的 URL 包括：协议、域名、端口、虚拟目录、文件名、参数、锚。

Hash：

• hash 是网页的标志位，HTTP 请求不包含锚
• 改变 hash,不会出发网页重载
• 改变 hash,会改变浏览器历史记录,会触发 window.onhashchange() 事件

改变 hash 值方式

• a 标签 <a href='#/home'></a>
• 设置 window.location.hash
• 浏览器 前进 history.forword() 后退 history.back()

hash 路由模式是通过 hanschange 事件监听 URL 变化，从而进行 DOM 操作来模拟页面跳转

History

浏览器有一个类似栈的历史纪录，遵循先进后出。URL 发生变都会生成一条历史记录

• history.length 出于安全考虑，History 对象不允许未授权代码访问历史记录中其它页面的 URLs，但可以通过 history.length 访问历史记录对象的长度。
• history.back() 回退到上一个历史记录，同浏览器后退键
• history.forward() 前进到下一个历史记录，同浏览器前进键
• history.go(n) 跳转到相应的访问记录；若 n > 0，则前进，若 n < 0，则后退，若 n = 0，则刷新当前页面

H5 新增两个方法 pushState()、replaceState().可以操作历史记录

history.pushState(state, title, URL)

• state：用于存储该 URL 对应的状态对象，可以通过 history.state 获取
• title：标题，目前浏览器并不支持
• URL：定义新的历史 URL 记录，需要注意，新的 URL 必须与当前 URL 同源，不能跨域

改函数会向浏览器历史记录添加有一条。改变 URL 时，页面不会加载、刷新

history.replaceState(state, title, URL)

replaceState 的使用与 pushState 类似,区别在于 replcaceState 时修改当前历史记录而不是新建一个

react-router-dom 注入方式

react-router 的注入方式是在组件树顶层放一个 Router 组件，然后在组件树中散落着很多 Router 组件。

顶层 Router 组件负责分析监听 URL 变化，其下 Router 组件渲染对应组件

• <BrowserRouter/>、<HashRouter/> 不同的路由模式
  • react-router 的实现依赖 history.js，一个 javascript 库
    • BrowserRouter 基于 history.js 的 BrowserHistory 类实现
      • BrowserRouter 类通过 pushState、replaceState 和 popstate 实现
    • HashRouter 类直接通过 location.hash、location.replace 和 hashchange 实现
• <Link /> 定义目标导航路径
• <Switch/> 用来将 react-router 由包容性路由转换为排他性路由，每次只要匹配成功就不会继续向下匹配。

参见

• SPA 路由三部曲之核心原理