原本想用react-route醉旦、react-routing命名，但是桨啃，npm中都已經(jīng)有了车胡。x表示extend
先附上項目地址：https://github.com/vqun/x-react-router
出于對前輩react-router的崇拜，以及考慮到從react-router遷移的成本照瘾，x-react-router的設(shè)計第一原則：
x-react-router原則一：保持react-router風(fēng)格
具體來講匈棘，我們希望在使用x-react-router時，使用如下的模式：
<Router history={history}>
<Route path="/" component={App}>
<Route path="home" component={Home} />
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User} />
</Route>
<Route path="*" component={NoMatch} />
</Route>
</Router>
是的析命，這和react-router是一樣的主卫，但是，也有不同碳却，也就是第二原則：
x-react-router原則二：支持異步加載队秩，支持多頁面
事實上，react-router假定你的所有組件都是“已存在”昼浦，對于SPA來講馍资，這已經(jīng)是足夠的。然而，當(dāng)我們需要的是多頁面時候呢鸟蟹，react-router并不能為我們很好的實現(xiàn)這方面的工作乌妙。同時，這里所說的多頁面建钥，與傳統(tǒng)的多頁面也是不一樣的藤韵。
傳統(tǒng)的多頁面，在頁面跳轉(zhuǎn)時熊经，前一個頁面資源將會“丟失”泽艘，而HTTP(s)是無狀態(tài)的，很多時候镐依，兩個頁面間可以共用這么多的數(shù)據(jù)匹涮、資源甚至狀態(tài)，都將在頁面跳轉(zhuǎn)時丟失槐壳，這可以說是多頁面的一大弊端然低。與之相反，SPA的出現(xiàn)則避免了這個問題务唐。尤其在移動端盛行時雳攘，Hybrid模式更是讓SPA得到了進(jìn)一步的發(fā)展。
SPA（單頁面應(yīng)用程序）將所有的“頁面”融合到了一個頁面中枫笛，使頁面在跳轉(zhuǎn)時吨灭，保留了前一個頁面的資源、狀態(tài)和數(shù)據(jù)崇堰，以及保證了這些資源的共享沃于，在很多時候涩咖，可以避免了重復(fù)性的資源請求（特別是狀態(tài)和數(shù)據(jù)的請求）海诲。似乎SPA是一個很好的模式，然而檩互，SPA卻也承擔(dān)著另外的問題：
- SEO識別困難：可以說這是最大的難題
- 大型SPA特幔，內(nèi)存消耗如何解決：隨著頁面的增加，內(nèi)存的消耗是驚人的
于是闸昨，今天提到的多頁面就是我們希望的模式蚯斯。我喜歡叫它：C-SPA。
C-SPA：Client-side Single Page Application饵较，譯為客戶端單頁面應(yīng)用程序拍嵌。
C-SPA需要滿足以下條件：
- 每個頁面都有其對應(yīng)的URL，每個URL都可以單獨訪問
- 任一頁面加載后循诉，其余頁面自動以SPA形式加載
關(guān)于C-SPA横辆，有空可以考慮寫個感想。
回到原則二上茄猫，支持異步加載狈蚤，從路由配置上講：
<Router history={history}>
<Route path="/" component={App}>
<Route path="home" component={Home} />
// ... other routes
<Route path="about" component="path/to/about-controller" />
</Route>
</Router>
可以看“about”的Route困肩，與其他不同的是，component使用的不是一個確切的組件脆侮，而是一個鏈接锌畸。因為我們希望，只有用戶真正訪問到about頁面時靖避，再去加載about的控制文件潭枣，之后的事情就交給控制文件處理』媚螅可以說卸耘，這里的about Route實際上只是一個“根據(jù)路由加載文件”的功能。而真正的組件/頁面渲染粘咖，則是由控制文件完成蚣抗。對于控制文件，則是另一個路由配置瓮下。因為先前的配置只是用于加載文件的路由配置翰铡，渲染的路由配置就必須在控制文件中完成。因此讽坏，對于about的控制文件锭魔，需要有如下的配置：
<Router history={history}>
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>
當(dāng)然，上面的配置顯然是不足的路呜，因為如果我們訪問的是/about頁面迷捧，頁面加載的是上面的控制文件，這時候配置里并沒有其他頁面的路由配置胀葱，因此漠秋，我們需要將其他頁面的路由配置寫入上述的控制文件中：
<Router history={history}>
<Route path="/" component={App}>
<Route path="home" component="/path/to/home-controller" />
// ... other routes
<Route path="about" component={About} />
</Route>
</Router>
除了和react-router類似的模式，以及增加了原則二的功能抵屿，x-react-router還有其他小的功能庆锦，如：
- 支持在Route中嵌套非Route的React Component；
- 支持自定義props傳入
- 所有的組件都可以通過定義contextTypes來獲取location信息
- 路由嵌套關(guān)系亦即組件嵌套關(guān)系
- 其他
暫時先寫這么多轧葛，后續(xù)會慢慢補充一些使用的心得搂抒。
