本人小白一枚,最近在學(xué)習(xí)React,今天學(xué)習(xí)路由所以就做著中文筆記了扫沼,可能下面有許多錯誤或者語句不通順,歡迎大家指出,原文出自這里轰坊,在github里面就可以看見英文版的了(大家也可以去官網(wǎng)看文檔衰倦,上面也有相對應(yīng)的例子)
<BrowserRouter>
<Router>使用html5的history api來保持ui和url同步。
BrowserRouter有如下屬性:
basename:string
這是所有位置的底層url。使用他則子目錄會自動嵌入父級目錄。
getUserConfirmation:func
一個用來確定導(dǎo)航的方法。默認(rèn)使用window.confirm既荚。
forceRefresh:bool
如果是true,路由器將使用全頁刷新來進(jìn)行頁面導(dǎo)航。你可能只想瀏覽器僅僅支持html5的歷史api兼蕊。
keyLength:number
location.key的長度惧所。默認(rèn)到6纽绍。
children:node
渲染一個子元素履因。
<HashRouter>
<Router>使用url的hash(i.e.window.location.hash)來保持ui和url同步栅迄。
重點(diǎn):hash history不支持location.key或者location.state西篓。在舊版本中岂津,我們希望依賴行為但出現(xiàn)了我們解決不了的難題。任何需要該行為的代碼和插件都運(yùn)行不了仅醇。因為這個技術(shù)僅僅面向于舊版本的瀏覽器析二,所以我們建議你使用<BrowserHistory>。
basename:string
和BrowserRouter的basename屬性使用一樣糠赦。不過不同的是產(chǎn)生的根目錄會有#
getUserConfirmation:func
一個用來確定導(dǎo)航的方法淌山。默認(rèn)使用window.confirm泼疑。
hashType:string
要使用的編碼類型是window.location.hash.有效值蕴纳,如:
1.“slash”-創(chuàng)建hashes翻翩,如: #/ 和 #/sunshine/lollipops
2."noslash"-創(chuàng)建hashes,如:#/ 和 #sunshine/lollipops?
3."hashbang"-創(chuàng)建"ajax crawlable"(Google反對使用)hases絮吵,如:#/ 和 #暇昂!/sunshine/lollipops
默認(rèn)是slash
children:node
渲染單個子元素
<Link>
在應(yīng)用中,提供可聲明可訪問的導(dǎo)航澄暮。
to:string
表示鏈接位置泣懊,通過連接location的pathname,seach,hash屬性創(chuàng)建出來。
to:object
該對象可以有下面任一個屬性:
1.pathname:代表鏈接地址
2.search:代表查詢參數(shù)
3.hash:放入url的hash警没,如:'#a-hash'
4.state:堅持到當(dāng)前位置的狀態(tài)
replace:bool
當(dāng)ture時梅誓,只要點(diǎn)擊鏈接,歷史堆棧中的第一位將會被代替,而不是在其上面再加一個新地址绵载。
innerRef:func
允許訪問組件內(nèi)部。(?民鼓??饮亏??這里不知道是不是這樣意思,囧)
<Router>
所有路由組件的公共低層接口。典型的應(yīng)用將其中一個高級路由器來代替,如下:
1.<BrowserRouter>
2.<HashRouter>
3.<MemoryRouter>
4.<NativeRouter>
5.<StaticRouter>
大多數(shù)使用<Router>的情況是為了使用戶歷史和狀態(tài)管理庫同步予借,如:Redux或者M(jìn)obx。注意:這不要求跟著React Router使用狀態(tài)管理庫瀑粥,它只是利于深層整合狞换。
history:object
一個用來導(dǎo)航的對象history黄琼。
children:node
渲染單個子元素