淺談React Router關(guān)于history的那些事
如果你想理解React Router,那么應(yīng)該先理解history。更確切地說,是history這個(gè)為React Router提供核心功能的包。它能輕松地在客戶端為項(xiàng)目添加基于location的導(dǎo)航,這種對(duì)于單頁應(yīng)用至關(guān)重要的功能。
npm install --save history
存在三類history,分別時(shí)browser,hash,與 memory。history包提供每種history的創(chuàng)建方法。
import { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history'
如果你使用React Router,他會(huì)為你自動(dòng)創(chuàng)建history對(duì)象,所以你并不需要與history進(jìn)行直接的交互。不過,理解不同類型的history依舊很重要,這樣你能在項(xiàng)目中決定究竟是用哪個(gè)。
history是什么?
無論你創(chuàng)建哪種history,你最終都會(huì)得到一個(gè)幾乎擁有相同屬性與方法的對(duì)象。
location
history對(duì)象中最重要的屬性就是location。location對(duì)象反映了當(dāng)前應(yīng)用所在的"位置"。其包含了pathname,search[注1],hash這種由'URL'派生出的屬性。
此外,每一個(gè)location都擁有一個(gè)與之關(guān)聯(lián)且獨(dú)一無二的key。'key'用于特定location的識(shí)別,向特定location存儲(chǔ)數(shù)據(jù)。
最后,location可以擁有與之相關(guān)的狀態(tài)。這是一些固定的數(shù)據(jù),并且不存在于URL之中。
{ pathname: '/here', search: '?key=value', hash: '#extra-information', state: { modal: true }, key: 'abc123' }
當(dāng)創(chuàng)建一個(gè)history對(duì)象后,需要初始化location。對(duì)于不同類型history這一過程也不相同。例如,browser history會(huì)解析當(dāng)前URL。
一個(gè)location控制所有?
誠然我們只能訪問當(dāng)前l(fā)ocation,history對(duì)象持續(xù)追蹤著一組location。正因?yàn)閾碛刑砑觢ocation并能夠訪問數(shù)組中任意location的能力,history才能被稱為“歷史”。如果history只能記錄當(dāng)前l(fā)ocation,那就應(yīng)該叫它“present”。
除了一組location外,history也保存一個(gè)索引值,用來指向當(dāng)前所對(duì)應(yīng)的location。
對(duì)于memory history,它們被直接定義。而對(duì)于browser history與hash history,數(shù)組與索引被瀏覽器所控制,并不能直接訪問[注2]。
navigation方法
可以說navigation方法是擁有l(wèi)ocation屬性的history體系的點(diǎn)睛之筆。navigation允許你改變當(dāng)前l(fā)ocation。
push方法
push方法使能你跳轉(zhuǎn)到新的location。通過在當(dāng)前l(fā)ocation后添加新的location時(shí),任意的'未來'location會(huì)被清除(之前由后退按鈕而形成的在當(dāng)前l(fā)ocation后的location)。
默認(rèn)情況下,當(dāng)你點(diǎn)擊<Link>時(shí),會(huì)調(diào)用history.push方法進(jìn)行導(dǎo)航。
history.push({ pathname: '/new-place' })
replace
replace方法與push相似,但它并非添加location,而是替換當(dāng)前索引上的位置。'未來'location將不會(huì)被清除。
重定向時(shí)要使用replace。這也是React Router的<Redirect>組件中使用的方法。
例如,當(dāng)你在頁面1通過點(diǎn)擊link按鈕導(dǎo)航到頁面2,頁面2可能會(huì)重定向到頁面3。如果使用push方法,點(diǎn)擊放回按鈕將從頁面3返回到頁面2(這里有潛在的可能再重定向到頁面3)。如果使用replace方法,會(huì)從頁面三直接返回頁面1。
history.replace({ pathname: '/go-here-instead' })
go, go, go
最后有三個(gè)帶‘go'的方法,它們分別是goBack,goForward與go。
goBack返回一層頁面。實(shí)際上是將history的索引值減1。
history.goBack()
goForward與goBack相對(duì)。向前一層頁面。這僅在擁有'未來'location生效,即當(dāng)用戶點(diǎn)擊了后退按鈕。
history.goForward()
go是一個(gè)強(qiáng)大的方法,并包含了goForward與goBack的功能。傳入負(fù)數(shù)則退后,傳入正數(shù)則向前。
history.go(-3)
監(jiān)聽!
采用觀察者模式,在location改變時(shí),history會(huì)發(fā)出通知。每一個(gè)history對(duì)象都有l(wèi)isten方法,接受一個(gè)函數(shù)作為參數(shù)。這個(gè)函數(shù)會(huì)被添加到history儲(chǔ)存的監(jiān)聽函數(shù)數(shù)組中。當(dāng)location變化時(shí)(如代碼調(diào)用history方法或用戶點(diǎn)擊瀏覽器按鈕),history對(duì)象將會(huì)調(diào)用所有l(wèi)istener方法。這能讓你在location變化時(shí)來設(shè)置代碼更新。
const youAreHere = document.getElementById('youAreHere') history.listen(function(location) { youAreHere.textContent = location.pathname })
React Router的router組件將會(huì)訂閱history對(duì)象,這樣當(dāng)location變化時(shí),其能重新渲染。
鏈接事物L(fēng)inking things together
每一類history都擁有createHref方法,其使用location對(duì)象,輸出URL。
內(nèi)部,history通過location對(duì)象進(jìn)行導(dǎo)航。然而像錨點(diǎn)元素(a),它并不知道history這個(gè)包,也不知道location對(duì)象是什么。為了能讓生成的HTML 在不需要history的情況下,依舊能夠?qū)Ш?。我們必須生成真的URL。
const location = { pathname: '/one-fish', search: '?two=fish', hash: '#red-fish-blue-fish' } const url = history.createHref(location) const link = document.createElement('a') a.href = url // <a href='/one-fish?two=fish#red-fish-blue-fish'></a>
以上涵蓋了基礎(chǔ)的history API。雖然還有其他未介紹的屬性與方法,但上述方法能夠是你明白history對(duì)象是如何運(yùn)作的。
結(jié)合在一起
不同類型的history間還是存在差異的,這需要你去考慮選擇一個(gè)適合你項(xiàng)目的history。
Between the three of them, any use case should be covered.
在瀏覽器中
browser history與hash history都被用于瀏覽器環(huán)境。它們與history和location的web API進(jìn)行交互,因此當(dāng)前l(fā)ocation與瀏覽器地址欄中展示的是相同的。
const browserHistory = createBrowserHistory() const hashHistory = createHashHistory()
它們兩者的最大區(qū)別在于從URL創(chuàng)建location的方式。browser history使用完整URL[注3],而hash history只使用在第一個(gè)hash后的那部分URL。
// 提供如下URL url = 'http://www.example.com/this/is/the/path?key=value#hash' // browser history創(chuàng)建的location對(duì)象: { pathname: '/this/is/the/path', search: '?key=value', hash: '#hash' } //hash history創(chuàng)建的location對(duì)象: { pathname: 'hash', search: '', hash: '' }
使用哈希
為何你需要hash history?理論上來說當(dāng)你導(dǎo)航到一個(gè)URL時(shí),服務(wù)端必有一個(gè)相應(yīng)文件與之對(duì)應(yīng)。對(duì)于動(dòng)態(tài)服務(wù),請(qǐng)求文件并不需要真實(shí)存在。相反,服務(wù)端會(huì)檢查請(qǐng)求的URL并決定返回的HTML。
然而,靜態(tài)文件服務(wù)可以直接返回存在磁盤中的文件。靜態(tài)服務(wù)能做的最動(dòng)態(tài)的事就是當(dāng)URL制定目錄時(shí),從目錄中返回index.html文件。
由于靜態(tài)文件服務(wù)的這種限制,最簡(jiǎn)單的解決方案[注4]就是在服務(wù)端僅使用一個(gè)真實(shí)的location來返回用戶端的獲取需求。當(dāng)然,僅有一個(gè)location意味著你的應(yīng)用只有一個(gè)URL,這樣就無法使用history。為了解決這一問題,hash history使用使用URL的哈希部分來讀寫location。
// 如果 example.com 使用靜態(tài)資源服務(wù), 這三個(gè)URL都將從 // /my-site/index.html獲取相同數(shù)據(jù) http://www.example.com/my-site#/one http://www.example.com/my-site#/two // 然而由于使用hash history,應(yīng)用中三者的location是不同的, // 因?yàn)閘ocation取決于URL的哈希部分 { pathname: '/one' } { pathname: '/two' }
縱然hash history運(yùn)作良好,但由于其依賴將所有路徑信息存在URL的哈希中,它被認(rèn)為有可能遭到黑客攻擊。因此當(dāng)網(wǎng)站沒有動(dòng)態(tài)服務(wù)時(shí)再考慮使用它吧。
memory:緩存所有history
使用memory location最棒的體驗(yàn)就是你可以在能使用JavaScript的地方隨意使用。
一個(gè)簡(jiǎn)單的例子你可以通過運(yùn)行Node在單元測(cè)試中使用它。這允許你能在不依賴瀏覽器運(yùn)行的情況下測(cè)試代碼。
更牛逼的是,memory history可以被使用在app中。在react-nativeapp中react-router-native使用memory history來實(shí)現(xiàn)基于location的導(dǎo)航。
你可以在瀏覽器中使用使用memory history,如果你愿意的話。(雖然這樣你會(huì)失去與地址欄的交互能力)。
這memory history與其他兩類history最大的區(qū)別在于其維護(hù)著自己的location。當(dāng)創(chuàng)建memory history后你可以傳入信息進(jìn)行初始化狀態(tài)。這個(gè)狀態(tài)是一個(gè)location數(shù)組與當(dāng)前l(fā)ocation的索引[注5]。這與其他兩類history是不同的,它們依賴瀏覽器來存儲(chǔ)這個(gè)location數(shù)組。
const history = createMemoryHistory({ initialEntries: ['/', '/next', '/last'], initialIndex: 0 })
使用history代替你來處理哪些相對(duì)繁瑣且易錯(cuò)的是一個(gè)行之有效的方法。
無論你選擇了何種類型的history,他們都是極易使用,并且擁有強(qiáng)大的能力進(jìn)行導(dǎo)航與基于loaction的渲染。
注釋
[1] search屬性是一個(gè)字符串而非被解析對(duì)象。由于大多數(shù)字符串解析包在使用上各不相同。所以history把選擇權(quán)留給了開發(fā)者而不是強(qiáng)制使用某種字符串解析包。如果你想了解更多,這里推薦一些流行的:query-string,querystring與原生的URLSearchParams
[2] 這是出于安全性的限制。在瀏覽器中history的location數(shù)組不僅包涵了訪問過的location信息。如果開放瀏覽會(huì)泄漏使用者的瀏覽器歷史信息,因此無法開放訪問。
[3] m默認(rèn)情況下,browser history創(chuàng)建的location對(duì)象,它的路徑名是URL全路徑名。當(dāng)然,你可以為history定一個(gè)基礎(chǔ)名,這樣路徑名中的這部分將會(huì)被忽略。
const history = createBrowserHistory({ basename: '/path' }) // 給出的路徑 url: http://www.example.com/path/here // history對(duì)象將會(huì)創(chuàng)建如下location { pathname: '/here', ... }
[4] 理論上,可以讓應(yīng)用中的每個(gè)有效URL返回相同的HTML文件。雖然這可以事項(xiàng),但如果所有的URL都是靜態(tài)的,會(huì)產(chǎn)生大量冗余文件。不過任意地址都使用參數(shù)大量來匹配大量可能址是不可行的。
[5] 如果并未提供memory history的初始化location數(shù)組與索引,則會(huì)生成如下默認(rèn)值:
entries = [{ pathname: '/' }] index = 0
對(duì)于大部分應(yīng)用這已經(jīng)足夠好了,但提前寫入history對(duì)于恢復(fù)內(nèi)容還是一個(gè)非常有用的方法。
到此這篇關(guān)于淺談React Router關(guān)于history的那些事的文章就介紹到這了,更多相關(guān)React Router history內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React18?中的?Suspense?API使用實(shí)例詳解
這篇文章主要為大家介紹了React18?中的?Suspense?API使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法,一步一步優(yōu)化react性能的過程,告訴大家使用immutable.js的必要性,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03react-redux action傳參及多個(gè)state處理的實(shí)現(xiàn)
本文主要介紹了react-redux action傳參及多個(gè)state處理的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07React實(shí)現(xiàn)Excel文件的導(dǎo)出與在線預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何利用?React?18?的強(qiáng)大功能,演示如何使用?React?18?編寫?Excel?文件的導(dǎo)出與在線預(yù)覽功能,需要的小伙伴可以參考下2023-12-12webpack4 + react 搭建多頁面應(yīng)用示例
這篇文章主要介紹了webpack4 + react 搭建多頁面應(yīng)用示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08