Reactでルーティングを実装したのでメモ

const React = require('react');
const ReactDOM = require('react-dom');
const createReactClass = require('create-react-class');
const EventListener = require('react-event-listener');
const ReactRouter = require('react-router');
const Router = ReactRouter.Router;
const Route = ReactRouter.Route;
const IndexRoute = ReactRouter.IndexRoute;
const History = ReactRouter.History;
const Link = ReactRouter.Link;
const Route = ReactRouter.Route;
const Link = ReactRouter.Link;
const hashHistory = ReactRouter.hashHistory;
const IndexRoute = ReactRouter.IndexRoute;

var App = createReactClass({
  render: function () {
    var userId = this.props.location.query;
    console.log(userId);
    return (
      <div>
        <div>
          <p><Link to="/">Dashboard1111</Link></p>
          <p><Link to="a">Inbox2222</Link></p>
          <p><Link to="b">CalendarRoute3333</Link></p>
          <p><Link to="c">DashboardRoute</Link></p>
        </div>
        <div>
          { this.props.children }
        </div>
      </div>
    );
  }
});

var Index = createReactClass({
  render: function(){
    return (
      <div>
        <p>Index</p>
      </div>
    );
  }
});

var DashboardRoute = createReactClass({
  render: function(){
    return (
      <div>
        <p>DashboardRoute</p>
      </div>
    );
  }
});

var InboxRoute = createReactClass({
  render: function(){
    return (
      <div>
        <p>InboxRoute</p>
      </div>
    );
  }
});

var CalendarRoute = createReactClass({
  render: function(){
    return (
      <div>
        <p>CalendarRoute</p>
      </div>
    );
  }
});

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index} />
      <Route path="a" component={InboxRoute}/>
      <Route path="b" component={CalendarRoute}/>
      <Route path="c" component={DashboardRoute}/>
    </Route>
 </Router>
),document.getElementById('content')
);