第七步：React路由（客戶端）

第七步：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是渲染當前子路由處理器的組件，它將根據(jù)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監(jiān)聽程序，當URL改變時渲染應(yīng)用。打開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應(yīng)用的入口點，當Browserify將整個依賴樹串起來并生成最終的bundle.js時會用到，這里我們填入初始化的內(nèi)容后我們基本不用再動它了。

React Router引導(dǎo)route.js中的路由，將它們和URL匹配，然后執(zhí)行相應(yīng)的callback處理器，在這里即意味著渲染一個React組件到<div id="app"></div>。它是怎么知道要渲染哪個組件呢？舉例來說，如果我們在/URL路徑，那么<Handler />將渲染Home組件，因為我們之前已經(jīng)在route.js指定這個組件了。后面我們將添加更多的路由。

另外注意，為了讓URL好看點，我們使用了HistoryLocation來啟用HMTL History API。比如它的URL看起來會是http://localhost:3000/add而不是http://localhost:3000/#add，因為我們構(gòu)建的是一個同型React應(yīng)用（在客戶端和服務(wù)端都能渲染），所以我們不需要用一些 非正統(tǒng)的方式在服務(wù)器上重定向以啟用這項特性，它直接就能用。

接下來讓我們創(chuàng)建這一節(jié)最后一個React組件。在app/components目錄新建文件Home.js，并添上內(nèi)容：

import React from 'react';

class Home extends React.Component {
  render() {
    return (
      <div className='alert alert-info'>
        Hello from Home Component
      </div>
    );
  }
}

export default Home;

下面應(yīng)該是我們在目前所創(chuàng)建的所有內(nèi)容。現(xiàn)在是你檢查代碼的好時候了.