## 第七步:React路由(客戶端)
在app/components目錄下新建文件*App.js*,粘貼下面的代碼:
~~~
import React from 'react';
import {RouteHandler} from 'react-router';
class App extends React.Component {
render() {
return (
<div>
<RouteHandler />
</div>
);
}
}
export default App;
~~~
`RouteHandler`是渲染當前子路由處理器的組件,它將根據URL渲染這些組件中的一個:Home、Top100、Profile,或Add Character。
> 注意:它和AngularJS中的`<div ng-view></div>`挺相似,會將當前路由中已渲染的模板包含進主布局中。
然后,打開app目錄下的*routes.js*,粘貼下面的代碼:
~~~
import React from 'react';
import {Route} from 'react-router';
import App from './components/App';
import Home from './components/Home';
export default (
<Route handler={App}>
<Route path='/' handler={Home} />
</Route>
);
~~~
之所以將路由像這樣嵌套,是因為我們將在`RouteHandler`的前后添加Navbar和Footer組件。不像其它組件,路由改變的時候,Navbar和Footer組件會保持不變。
最后,我們需要添加一個URL監聽程序,當URL改變時渲染應用。打開App目錄下的*main.js*并添加下列代碼:
~~~
import React from 'react';
import Router from 'react-router';
import routes from './routes';
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
~~~
> 注意:*main.js*是我們的React應用的入口點,當Browserify將整個依賴樹串起來并生成最終的bundle.js時會用到,這里我們填入初始化的內容后我們基本不用再動它了。
[React Router](http://rackt.github.io/react-router/)引導route.js中的路由,將它們和URL匹配,然后執行相應的callback處理器,在這里即意味著渲染一個React組件到`<div id="app"></div>`。它是怎么知道要渲染哪個組件呢?舉例來說,如果我們在`/`URL路徑,那么`<Handler />`將渲染Home組件,因為我們之前已經在route.js指定這個組件了。后面我們將添加更多的路由。
另外注意,為了讓URL好看點,我們使用了[`HistoryLocation`](http://rackt.github.io/react-router/#HistoryLocation)來啟用HMTL History API。比如它的URL看起來會是`http://localhost:3000/add`而不是`http://localhost:3000/#add`,因為我們構建的是一個同型React應用(在客戶端和服務端都能渲染),所以我們不需要用一些[非正統的方式](https://github.com/sahat/tvshow-tracker/blob/master/server.js#L343-L345)在服務器上重定向以啟用這項特性,它直接就能用。
接下來讓我們創建這一節最后一個React組件。在app/components目錄新建文件*Home.js*,并添上內容:
~~~
import React from 'react';
class Home extends React.Component {
render() {
return (
<div className='alert alert-info'>
Hello from Home Component
</div>
);
}
}
export default Home;
~~~
下面應該是我們在目前所創建的所有內容。現在是你檢查代碼的好時候了。

哦,還有一個,打開app目錄下的alt.js并粘貼下面的代碼,我將會在第9步真正用到它的時候再解釋這些代碼的目的。
~~~
import Alt from 'alt';
export default new Alt();
~~~
現在我們只需要在后端設置一些東西,就終于能將我們的應用運行起來了。
- 前言
- 概述
- 第一步:新建Express項目
- 第二步:構建系統
- 第三步:項目結構
- 第四步: ES6速成教程
- 第五步: React速成教程
- 第六步:Flux架構速成教程
- 第七步:React路由(客戶端)
- 第八步:React路由(服務端)
- 第九步:Footer和Navbar組件
- 第十步:Socke.IO – 實時用戶數
- 第十一步:添加Character的組件
- 第十二步:數據庫模式
- 第十三步:Express API 路由(1/2)
- 第十五步:Home組件
- 第十四步:Express API 路由(2/2)
- 第十六步:角色(資料)組件
- 第十七步:Top 100 組件
- 第十八步:Stats組件
- 第十九步:部署
- 第二十步: 附加資源
- 總結