SPAのサイトを制作したのですが、素人くさい感じに、display:none;やdisplay:block;で切り替えをしていたので、
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')
);