react-router提供了三種方式來實現路由,並沒有默認的路由,需要在聲明路由的時候,顯式指定所使用的路由。
//v1.x
<Router/>
//v2.0.0 // hash history import { hashHistory } from 'react-router' <Router history={hashHistory} />
- browserHistory
- hashHistory
- createMemoryHistory
官方推薦使用browserHistory
使用hashHistory,瀏覽器的url是這樣的:/#/user/liuna?_k=adseis
使用browserHistory,瀏覽器的url是這樣的:/user/liuna
這樣看起來當然是browerHistory更好一些,但是它需要server端支持。
使用hashHistory時,因為有 # 的存在,瀏覽器不會發送request,react-router 自己根據 url 去 render 相應的模塊。
使用browserHistory時,從 / 到 /user/liuna, 瀏覽器會向server發送request,所以server要做特殊請求,比如用的 express 的話,你需要 handle 所有的路由 app.get('*', (req, res) => { ... }),使用了 nginx 的話,nginx也要做相應的配置。
如果只是靜態頁面,就不需要用browserHistory,直接hashHistory就好了。
react router為什么推薦使用browserHistory而不推薦hashHistory?
首先 browserHistory 其實使用的是 HTML5 的 History API,瀏覽器提供相應的接口來修改瀏覽器的歷史記錄;而 hashHistory 是通過改變地址后面的 hash 來改變瀏覽器的歷史記錄;
History API 提供了 pushState() 和 replaceState() 方法來增加或替換歷史記錄。而 hash 沒有相應的方法,所以並沒有替換歷史記錄的功能。但 react-router 通過 polyfill 實現了此功能,具體實現沒有看,好像是使用 sessionStorage。
另一個原因是 hash 部分並不會被瀏覽器發送到服務端,也就是說不管是請求 http://domain.com/index.html#foo 還是 http://domain.com/index.html#bar ,服務只知道請求了 index.html 並不知道 hash 部分的細節。而 History API 需要服務端支持,這樣服務端能獲取請求細節。
還有一個原因是因為有些應該會忽略 URL 中的 hash 部分,記得之前將 URL 使用微信分享時會丟失 hash 部分。
