react-router 实现分析
2023-03-20 14:40:26 时间
react-router 模式概览
- hash (地址栏 # 做锚点,监听锚点后面地址的改变)
- history (利用 HTML5 的 history API)
- abstract (node环境下)
Hash 模式
通过监听 window.location 的变化来渲染对应组件
如何监听到 window.location 的变化呢?可以通过 window.onhashchange 去监听, 例如:
window.onhashchange = function(e) {
console.log(e);
}
可以看到 # 锚点后面的部分改变了之后触发了这个onchangehash事件
hash 的变化都能被浏览器监听到,进而实现路由改变时渲染对应的组件
history 模式
使用 history 模式就能把你们都很排斥觉得很丑的 #
去掉。
不过,代价就是每次 url 的变更都会去请求服务器资源,原因就是因为浏览器认为 url 地址改变了需要去请求对应的资源,如果这个时候服务器没有进行相应的配置(即,url下没有对应的静态资源,则会直接返回 404,一般单页面项目,服务器配置都是统一返回同一静态资源,也就是打包后的 index.html)
history 模式是如何监听 url 改变的呢?
得益于 history API,现在浏览器也可以在改变地址栏的时候不进行页面刷新,从而达到只刷新对应路由组件的效果。
既然是 API 那它肯定有一些暴露的方法供我们使用:
控制台打印的 history 对象
属性:
length
:返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页。例如,在一个新的选项卡加载的一个页面中,这个属性返回1。state
: 返回一个表示历史堆栈顶部的状态的值。这个属性是通过history的方法设置的。 方法:go(param: number)
: 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如:参数为-1的时候为上一页,参数为1的时候为下一页. 当整数参数超出界限时没有效果也不会报错。back()
: 在浏览器历史记录里前往上一页, 用户可点击浏览器左上角的返回(译者注:←)按钮模拟此方法. 等价于 history.go(-1)。forward()
: 在浏览器历史记录里前往下一页,用户可点击浏览器左上角的前进(译者注:→)按钮模拟此方法. 等价于 history.go(1).
同样的 back() 和 forward() 即使历史记录栈中不满足它们的操作,不会报错也不会有效果
pushState()
: 顾名思义,push 一条新的记录到历史记录栈最顶端。参数可以写入 state 和新的 urlreplaceState()
: 直接将历史记录栈最顶端的记录(也可以理解为当前页面)替换。参数可以写入 state 和新的 url
这些方法能够自动处理浏览器访问记录,然后 react-router 只需要监听对应的 location.pathname
就可以更新对应的路由组件。
相关文章
- 数据分析师、大数据开发、Hadoop开发工程师等各路人才薪资怎么样?
- 从代码层读懂Java HashMap的实现原理
- 企业如何实现对工业大数据的预处理?
- 大数据行业步入快车道?忽视了它最终要被大浪淘沙
- 不要再天天写表单了,淘宝大牛教你零基础写PHP扩展
- Java Web模板代码生成器的设计与实现
- 关于Git的几个使用技巧
- signalR+redis分布式聊天服务器搭建
- 大数据告诉你,996戳中了谁又戳痛了谁?
- DaaS能否帮助企业从数据湖中获益?
- Git如何处理大仓库
- 大数据改变了网络主机市场的两端
- 用C语言写面向的对象是一种什么样的体验
- 像数据科学家一样思考:12步指南(上)
- 聊聊Clean Code的编码、重构技巧
- 中级程序员还应该如何提高自己?
- PHP垃圾回收机制详解
- PHP程序员的技术成长规划
- 必看!大数据技术学习,深度挖掘大数据的现状分析
- 读懂工业大数据 这篇文章不得不看