- 深入理解React Router:從原理到實踐
- 李楊韜
- 718字
- 2021-04-16 16:10:42
2.3 hashHisotry
2.3.1 創建hashHisotry
hashHistory在瀏覽器中使用,在不兼容pushState等原生接口的瀏覽器中,可使用hashHistory管理地址導航。hashHistory的特點是路徑的所有部分都在瀏覽器地址的hash中,即“#”號之后,讀取window.location.hash得到的將是hashHistory管理的整個地址信息。
如果不希望在頁面切換時刷新頁面,同時希望將頁面的URL存儲在瀏覽器地址的hash中,則可使用hashHistory。創建hashHistory的方式如下:

在創建hashHistory時,除了能傳入getUserConfirmation、basename,還可設置hashHistory的hash類型,其配置如下:

注意,hashHistory不接受keyLength、forceRefresh的創建配置,這意味著其缺少了hashHistory.location中的key與強刷模式。
getUserConfirmation與basename在2.1節中有過介紹,分別是配置彈窗確認函數及配置基準地址。
從TypeScript類型HashType中可以看到,hashType支持hashbang、noslash及slash3種類型,如果在創建時不指明hashType,則默認的hashType為slash。

對于slash類型的hashHistory,其hash符號“#”后都將跟上“/”,如:

若創建的hashType為noslash類型:

則“#”后沒有“/”:

若創建的hashType為hashbang類型:

則對應的hash路徑“#”后會接上“!”與“/”:

hashbang是UNIX操作系統中的一種寫法,名稱叫作Shebang或hashbang。hashbang是一個由“#”和“!”構成的字符序列“#!”,其出現在文本文件的第一行的前兩個字符。在Web應用中,“#”后面的內容默認不會被爬蟲爬取到。近年來,頁面hash有著與業務相關的含義,不同hash對應的網頁內容也有所不同。例如路由地址,為了有效地區別這種情況,讓搜索引擎更好地抓取數據,Google提出的解決方案是用“#!”進行區分,即hashbang。當網頁爬蟲遇到類似的帶有hashbang的URL時,就會對URL中的hash進行抓取,從而獲得更全面的信息。
注意,即使在創建hashHistory時沒有進行任何操作,路徑也可能發生變化。例如在瀏覽器中輸入https://example.com/,在createHashHistory被調用后,默認的hashType為slash時,瀏覽器URL會變為https://example.com/#/。這是因為createHashHistory在被調用時,會進行一次準備工作:

由于encodedPath變量為“/”,與path變量為空字符串不相同,因而會執行一次replaceHashPath('/')。執行該操作的目的是初始化hashType,如果hashType為hashbang,則路徑為https://example.com/#!/。
- Learn TypeScript 3 by Building Web Applications
- Learning Cython Programming(Second Edition)
- CockroachDB權威指南
- Dynamics 365 Application Development
- Cassandra Design Patterns(Second Edition)
- The React Workshop
- Learning Linux Binary Analysis
- C#實踐教程(第2版)
- Learning PHP 7
- Natural Language Processing with Java and LingPipe Cookbook
- FFmpeg開發實戰:從零基礎到短視頻上線
- Extending Unity with Editor Scripting
- C陷阱與缺陷
- Apache Solr PHP Integration
- DevOps 精要:業務視角