前端路由模式 hash 和 history

[wuyanqian0503]

hash模式的实现原理

基于location.hash实现的，它的值就是URL中#后的部分。

hash路由模式有以下特性：

• hash是客户端的一种状态，不属于URI中的fragment部分，在和服务器进行通讯时，不会携带fragment部分的内容
• fragment发生变更不会出发页面刷新，通过onHashChange可以监听hash变化
• 可以通过a标签的href来修改hash，或者通过location.hash来修改，都不会引起页面刷新
• hash的变化会向浏览器的访问历史中添加记录

history模式的实现原理

其实 window.history 这个全局对象在 HTML4 的时代就已经存在，只不过那时我们只能调用 back()、go()等几个方法来操作浏览器的前进后退等基础行为，而HTML5 新引入的 pushState()和 replaceState()及 popstate事件 ，能够让我们在不刷新页面的前提下，修改 URL，并监听到 URL 的变化，为 history 路由的实现提供了基础能力。

history模式路由有以下特性：

• pushState()和 replaceState()可以在不刷新页面的情况下修改路由
• pushState()会产生新的历史记录，而replaceState是对当前历史记录的修改，不会产生新的记录
• 当活动历史记录条目更改时，将触发popstate事件
• pushState()和 replaceState() 不会触发popState事件，需要主动触发相关逻辑（例如页面更新）

history 模式的问题

history模式的前端路由的需要后端做配置，当我们访问到一个前端路由时，由于后端并不存在对应路径，所以默认会返回404给到客户端，所以通常我们会通过nginx做一些配置，设置一个默认首页资源如 index.html，当浏览器解析html时执行到了Router部分的逻辑，就可以向页面渲染对应的组件了。

[wuyanqian0503]

React-Router用法回顾

React Router 的组件通常分为三种：