第七步：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是渲染当前子路由处理器的组件，它将根据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引导route.js中的路由，将它们和URL匹配，然后执行相应的callback处理器，在这里即意味着渲染一个React组件到<div id="app"></div>。它是怎么知道要渲染哪个组件呢？举例来说，如果我们在/URL路径，那么<Handler />将渲染Home组件，因为我们之前已经在route.js指定这个组件了。后面我们将添加更多的路由。

另外注意，为了让URL好看点，我们使用了HistoryLocation来启用HMTL History API。比如它的URL看起来会是http://localhost:3000/add而不是http://localhost:3000/#add，因为我们构建的是一个同型React应用（在客户端和服务端都能渲染），所以我们不需要用一些 非正统的方式在服务器上重定向以启用这项特性，它直接就能用。

接下来让我们创建这一节最后一个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;

下面应该是我们在目前所创建的所有内容。现在是你检查代码的好时候了.