## 第七步：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(); ~~~ 现在我们只需要在后端设置一些东西，就终于能将我们的应用运行起来了。