最近一個(gè)SPA的玩具項(xiàng)目中在用react-router捞高,有個(gè)問(wèn)題一直在困擾我谣辞。我按照官方的文檔宋距,使用browserHistory,然后生成的客戶端路由都是不帶#的埃元。這樣在一個(gè)子級(jí)路由中刷新頁(yè)面涝涤,就是請(qǐng)求這個(gè)子級(jí)路由,我后端就得能識(shí)別這個(gè)子級(jí)路由岛杀。阔拳。這就有些蛋疼,和我以前用過(guò)的#/XXX這樣的客戶端路由有些不同类嗤。
不應(yīng)該啊衫生,作者不可能沒(méi)考慮到這個(gè)問(wèn)題啊,肯定是我哪里用的不對(duì)土浸。于是乎,我又去看了下文檔彭羹。
找到這篇文檔 Histories黄伊,終于算是解決了我的疑惑。
react-router提供了三種方式來(lái)實(shí)現(xiàn)路由派殷,并沒(méi)有默認(rèn)的路由还最,需要在聲明路由的時(shí)候墓阀,顯式指定所使用的路由。
//v1.x
<Router/>
//v2.0.0
// hash history
import { hashHistory } from 'react-router'
<Router history={hashHistory} />
- browserHistory
- hashHistory
- createMemoryHistory
官方推薦的是browserHistory拓轻,它是使用瀏覽器內(nèi)置的 History API 實(shí)現(xiàn)的斯撮。同時(shí),后端也需要特殊配置扶叉,來(lái)處理這些可能發(fā)送到后端的路由勿锅,不光是因?yàn)橛脩艨赡苁謩?dòng)刷新頁(yè)面,還有另外一個(gè)更重要的原因枣氧。在不支持 History 特性的舊式瀏覽器中溢十,react-router就會(huì)直接重新加載頁(yè)面(顯然后端必須識(shí)別這些路由)。
文檔中有一句也提到了為什么推薦使用browser history达吞,而不是hash history张弛。要知道,react router以前是默認(rèn)使用hash history的酪劫。
You might wonder why we don't fall back to hash history; the problem is that URLs become non-deterministic. If a visitor on hash history shares a URL with a visitor on browser history, and then they share that back, we end up with a terrible cartesian product of infinite potential URLs.
意思就是怕 hash history 和 browser history 的混用在分享url時(shí)引起混亂吞鸭。
我有點(diǎn)不太明白,一個(gè)app應(yīng)該只會(huì)采用一種方式覆糟,不會(huì)混用啊刻剥。
先留個(gè)坑,待我再查查搪桂。
在stackoverflow上提了個(gè)問(wèn)題透敌,總算解決了疑惑。
文檔中的意思是在運(yùn)行時(shí)切換 browser history 和 hash history踢械,而不是我之前理解的只有一種方式實(shí)現(xiàn)酗电。那在分享url的時(shí)候,自然是會(huì)引起混亂的内列。