【前言】
不怕我誤人子弟嗎QQ
【正文】
昨天我們簡單的利用react-router模擬一個SPA的網頁,今天我們就來說說Router、Route、Link到底有什麼常用屬性吧!Let's go.
Router
:包在最外層的路由組件,內部只能有一個child<BrowserRouter>
:利用HTML5 History API幫忙我們與網頁的URL同步<HashRouter>
:利用Hash功能來幫助我們與網頁的URL同步<BrowserRouter>
的basename"slash" - 接受 #/ 與 #/sunshine/lollipops
"noslash" - 接受 # 與 #sunshine/lollipops
"hashbang" - 接受 “ajax crawlable” (deprecated by Google) hashes #!/ and #!/sunshine/lollipops
* children:只能有單一child在Router中
<MemoryRouter>
:將我們的URL History狀態存到記憶體中,通常用來測試用或是給React-Native用
* initialEntries:array,可以是一個locaation object或是單純的URLs字串
* initialIndex:number,初始的index enrty
* keyLength:number,location的長度
* children:只能有單一child在Router中
<StaticRouter>
:不改變Location的Router,通常用於伺服器render用(server-side rendering)
* basename:string,通常是指整個location的base,通常要求要有leading slash但不要有trailing slash
* location:string,可以放server received的url,像是在node server的req.url
* location:object,可以放object型態的url( { pathname, search, hash, state })
* context:object,是javascript物件
* children:只能有單一child在Router中