トッカンソフトウェア

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の一部をパラメータとして受け取ることもできます。


ページのトップへ戻る