hash history 原理
Hash history是react-router v4版本后新增的一种路由模式,它的原理是将历史记录(浏览器地址栏中的URL)以hash的形式存储在URL中,通过监听URL上的hash变化来渲染不同的页面。相比于浏览器默认的history模式,使用hash history可以避免在前端路由变化时向服务器请求数据,从而提升网站的性能和用户体验。
具体来说,hash history的实现步骤如下:
1. 在HTML文档中,通过一个具有特殊意义的字符 "#" 来表示hash值。
2. 在Web应用程序中,由路由模块负责监听地址栏的变化,如果其中的hash值发生变化,就会触发一个回调函数来重新渲染页面。
3. 在用户点击链接或者代码中使用编程式导航时,路由模块会根据指定的路由地址生成对应的hash值,并将其添加到地址栏中。
需要注意的是,由于hash值的改变不会向服务器发起请求,所以在使用hash history时需要注意以下几点:
react router 原理
1. 当用户刷新页面时,浏览器会重新向服务器请求数据,如果服务器无法处理该请求就会返回404错误。
2. 在一些需要SEO的场景下,搜索引擎可能无法正确的解析hash值,导致页面SEO效果不佳。
3. hash值的长度有限制,过长的hash值可能会影响用户的体验。
总的来说,使用hash history是一种简单高效的路由方式,可以满足大部分的前端路由需求,但在一些特定场景下还需要根据实际情况选择其他的路由模式来优化用户体验。