目前為止蒜撮，我們所做的所有工作都在index.js或Detail.js中放航，但現(xiàn)在我們將添加第三個(gè)文件List.js，它將作為主頁(yè)穷缤。從那里敌蜂，用戶(hù)將能夠選擇一個(gè)GitHub倉(cāng)庫(kù)，然后像以前一樣顯示Detail.js津肛。
所以我們從一個(gè)頁(yè)面顯示所有commits章喉，forks，pull變成先訪問(wèn)主頁(yè)身坐，用戶(hù)可以選擇React秸脱，ReactNative，Jest或其他的facebook項(xiàng)目部蛇。這涉及到很大的變化摊唇，所以我把這點(diǎn)分為兩部分：先實(shí)現(xiàn)React Router保證頁(yè)面能用，再添加新的主頁(yè)涯鲁。
簡(jiǎn)單說(shuō)一下巷查，React Router是根據(jù)用戶(hù)要求的URL加載不同頁(yè)面的組件。比如http://localhost:8080/hello會(huì)是一個(gè)頁(yè)面抹腿，http://localhost:8080/world 加載不同的頁(yè)面岛请。
你現(xiàn)在的index.js 文件應(yīng)該是這樣的:
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Detail from './pages/Detail';
ReactDOM.render(
<Detail message="This is coming from props!" />,
document.getElementById('app')
);
除了最初的import，還需要多添加兩行：
src/index.js
import { Router, Route, IndexRoute} from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory'
第一個(gè)import加載三個(gè)組件警绩，我們現(xiàn)在要用到其中的兩個(gè)崇败，另一個(gè)先引入再說(shuō)。Router是React Router本身，它需要URL和React組件后室，并將它們放在一起缩膝。Router是一個(gè)單獨(dú)的URL映射，例如URL detail和我們的Detail組件岸霹。 IndexRoute用作默認(rèn)路由疾层，我們很快就會(huì)用到。
第二個(gè)import提高了巨大的復(fù)雜度松申，你可能不想知道云芦。簡(jiǎn)單來(lái)說(shuō)，ReactRouter需要一個(gè)好的辦法來(lái)處理瀏覽器歷史紀(jì)贸桶。它通過(guò)#（被稱(chēng)為hash history 因?yàn)?#被不懂音樂(lè)的人稱(chēng)為hash）鏈接不同組件舅逸。這個(gè)#不是必須的而且看起來(lái)有點(diǎn)難看，所以我們要去掉這個(gè)皇筛。所以我們要引入createHistory琉历。
有了這些新的import，現(xiàn)在把注意力放在index的render方法∷祝現(xiàn)在我們只是渲染了一個(gè)Detail組件旗笔，現(xiàn)在我們用了React Router 所以這樣寫(xiě)：
src/index.js
const history = createBrowserHistory()
ReactDOM.render(
<Router history={history}>
<div>
<Route exact path="/" component={Detail} />
</div>
</Router>,
document.getElementById('app')
);
你看，我們不是直接渲染Detail組件拄踪，而是渲染Router蝇恶，而Router匹配到URL后會(huì)加載適當(dāng)?shù)慕M件。現(xiàn)在我們只制定一個(gè)URL惶桐，然后渲染Detail組件间景。
保存然后刷新瀏覽器公给，界面并沒(méi)有什么變化狼电。
同時(shí)我們需要添加一點(diǎn)比較高端的寫(xiě)法浪默，但是這是必須的，直到ReactRouter解決這個(gè)問(wèn)題救恨。你看贸辈，當(dāng)你從url1到url2的時(shí)候，實(shí)際沒(méi)有發(fā)生跳轉(zhuǎn)肠槽，ReactRouter只是卸載以前的組件加載別的組件擎淤，這會(huì)導(dǎo)致滾動(dòng)問(wèn)題，因?yàn)槿绻脩?hù)在更改url時(shí)如果已經(jīng)滾動(dòng)了一半的頁(yè)面秸仙，那么新頁(yè)面也會(huì)一開(kāi)始就在一半的位置揉燃。
所以，高端的在這里：每當(dāng)React Router 更新路由時(shí)筋栋，我們告訴瀏覽器回到文檔頂部，就像傳統(tǒng)頁(yè)面刷新一樣正驻。
我們同時(shí)進(jìn)行兩個(gè)修改弊攘。替換Router的那幾行：
src/index.js
const history = createBrowserHistory()
ReactDOM.render(
<Router history={history} onUpdate={() => window.scrollTo(0, 0)}>
<div>
<Route exact path="/" component={Detail} />
</div>
</Router>,
document.getElementById('app')
);
OnUpdate部分是在跳轉(zhuǎn)時(shí)重置滾動(dòng)位置抢腐。
