第七步：React路由（客戶(hù)端）

第七步：React路由（客戶(hù)端）

在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是渲染當(dāng)前子路由處理器的組件，它將根據(jù)URL渲染這些組件中的一個(gè)：Home、Top100、Profile，或Add Character。

注意：它和AngularJS中的<div ng-view></div>挺相似，會(huì)將當(dāng)前路由中已渲染的模板包含進(jìn)主布局中。

然后，打開(kāi)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>
);

之所以將路由像這樣嵌套，是因?yàn)槲覀儗⒃?code>RouteHandler的前后添加Navbar和Footer組件。不像其它組件，路由改變的時(shí)候，Navbar和Footer組件會(huì)保持不變。

最后，我們需要添加一個(gè)URL監(jiān)聽(tīng)程序，當(dāng)URL改變時(shí)渲染應(yīng)用。打開(kāi)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)用的入口點(diǎn)，當(dāng)Browserify將整個(gè)依賴(lài)樹(shù)串起來(lái)并生成最終的bundle.js時(shí)會(huì)用到，這里我們填入初始化的內(nèi)容后我們基本不用再動(dòng)它了。

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

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

接下來(lái)讓我們創(chuàng)建這一節(jié)最后一個(gè)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)該是我們?cè)谀壳八鶆?chuàng)建的所有內(nèi)容?，F(xiàn)在是你檢查代碼的好時(shí)候了.