react-routerを使ってページ遷移(@第3回 Reactハンズオン 初等部編) ref: http://qiita.com/takanorip/items/649c7862a8a5380dd8be

App.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss, Link } from 'react-router'


class Top extends Component {
  render() {
    return <div>Top</div>;
  }
}

class About extends Component {
  render() {
    return <div>About</div>;
  }
}

class Works extends Component {
  render() {
    return <div>Works</div>;
  }
}

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to='/'>Top</Link></li>
            <li><Link to='/about'>About</Link></li>
            <li><Link to='/works'>Works</Link></li>
          </ul>
          <div className="text">
            { this.props.children }
          </div>
          <Match exactly pattern='/' component={Top} />
          <Match pattern='/about' component={About} />
          <Match pattern='/works' component={Works} />
        </div>
      </BrowserRouter>
    );
  }
}

render((
  <App />
), document.getElementById('app'));

file3.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import { IndexRoute, Link, Router, Route, browserHistory } from 'react-router';

import styl from './App.styl';

class App extends Component {
  render() {
    return (
      <div className="main">
        <ul className="navi">
          <li className="navi__bt"><Link to="/">TOP</Link></li>
          <li className="navi__bt"><Link to="/about">ABOUT</Link></li>
          <li className="navi__bt"><Link to="/works">WORKS</Link></li>
        </ul>
        <div className="text">
          { this.props.children }
        </div>
      </div>
    );
  }
}

class Top extends Component {
  render() {
    return <div>Top</div>;
  }
}

class About extends Component {
  render() {
    return <div>About</div>;
  }
}

class Works extends Component {
  render() {
    return <div>Works</div>;
  }
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Top} />
      <Route path="/about" component={About} />
      <Route path="/works" component={Works} />
    </Route>
  </Router>
), document.getElementById('app'));