react-router
今回はreact-routerをやります。react-routerは画面遷移を制御してくれます。react-routerはReact本体の機能ではなく、Reactの画面制御のために作られた外部コンポーネントです。
hashHistoryのサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.4.1/ReactRouter.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Router = ReactRouter.Router;
var Link = ReactRouter.Link;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var World = React.createClass({
render: function() {
return (
<h1>World!!</h1>
);
}
});
var Hello = React.createClass({
render: function() {
return (
<div>
<Link to="/w">Hello</Link>
{ this.props.children }
</div>
);
}
});
var routes = (
<Router history={hashHistory}>
<Route path="/" component={Hello}>
<Route path="/w" component={World} />
</Route>
</Router>
);
ReactDOM.render(routes, document.getElementById('hello'));
</script>
</body>
</html>
実行イメージ 
最初に呼ばれたときは Route path="/" で指定したコンポーネントが { this.props.children } に表示されます。
Link でリンクが作成され、リンクをクリックすると to で指定したものと Route path が一致しているコンポーネントが
{ this.props.children } に表示されます。
履歴
Router historyでヒストリーモードを指定します。ヒストリーモードはhashHistory、browserHistory、createMemoryHistoryがあります。hashHistoryはURLの後ろに#～がついてページ内遷移の履歴を管理し、browserHistoryはURL自体を書き換えます。
createMemoryHistoryは使い方が分かりません。
公式ページではbrowserHistoryを推奨していますが、hashHistoryはHTMLファイルをダブルクリックで動作確認が出来るので、
簡単な動作確認であればhashHistoryが楽です。
browserHistoryはRoute pathの指定でルートからのパスを指定する必要があります。
browserHistoryのサンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.4.1/ReactRouter.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Router = ReactRouter.Router;
var Link = ReactRouter.Link;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var World = React.createClass({
render: function() {
return (
<h1>World!!</h1>
);
}
});
var Hello = React.createClass({
render: function() {
return (
<div>
<Link to="/w">Hello</Link>
{ this.props.children }
</div>
);
}
});
var routes = (
<Router history={browserHistory}>
<Route path="/test/test.html" component={Hello}>
<Route path="/w" component={World} />
</Route>
</Router>
);
ReactDOM.render(routes, document.getElementById('hello'));
</script>
</body>
</html>
親子とパラメータ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.4.1/ReactRouter.js"></script>
<body>
<div id="hello"></div>
<script type="text/babel">
var Router = ReactRouter.Router;
var Link = ReactRouter.Link;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var Ee = React.createClass({
render: function() {
return (
<div>{this.props.params.msg} -> <Link to="/">Home</Link></div>
);
}
});
var Dd = React.createClass({
render: function() {
return (
<div>DD -> <Link to={"/ee/Hello !"}>EE</Link>
{ this.props.children }
</div>
);
}
});
var Cc = React.createClass({
render: function() {
return (
<div>CC -> <Link to="/dd">DD</Link></div>
);
}
});
var Bb = React.createClass({
render: function() {
return (
<div>BB -> <Link to="/cc">CC</Link></div>
);
}
});
var Aa = React.createClass({
render: function() {
return (
<div>
AA
{ this.props.children }
</div>
);
}
});
var Home = React.createClass({
render: function() {
return (
<div>
<Link to="/aa">AA</Link>-
<Link to="/bb">BB</Link>-
<Link to="/cc">CC</Link>-
<Link to="/dd">DD</Link>-
<Link to={"/ee/World !!"}>EE</Link>
{ this.props.children }
</div>
);
}
});
var routes = (
<Router history={hashHistory}>
<Route path="/" component={Home}>
<Route path="/aa" component={Aa}>
<Route path="/bb" component={Bb} />
<Route path="/cc" component={Cc} />
</Route>
<Route path="/dd" component={Dd}>
<Route path="/ee/:msg" component={Ee} />
</Route>
</Route>
</Router>
);
ReactDOM.render(routes, document.getElementById('hello'));
</script>
</body>
</html>
実行イメージ 
Routeは親子関係にできます。またURLの一部をパラメータとして受け取ることもできます。
ページのトップへ戻る