目的
react-router が取りあえず動く簡単なサンプルを書いてみる。
バージョン指定せずに npm install react-router すると古い v0.13.3 が入ってしまい、github の README などに書いてあるサンプルコードが動作しないので気をつける（現時点で v1.0.0-beta2 だと動く）
ファイル構成
こんな感じ。
.
├── dest
│ └── app.js
├── index.html
├── package.json
└── src
├── app.js
└── router.js
インストール
package.json
{
"devDependencies": {
"babelify": "^6.1.2",
"browserify": "^10.2.4",
"react": "^0.13.3",
"react-router": "^1.0.0-beta2",
"watchify": "^3.2.3"
},
"scripts": {
"watch": "watchify -t babelify src/app.js -o dest/app.js -v"
}
}
$ npm install
watch
src ディレクトリの js ファイルを src/app.js で import でまとめる感じにしておいて監視、変更あったらビルド。
$ npm run watch
ファイル作成
src/app.js
import React from 'react/addons';
import router from './router';
React.render(router, document.getElementById('example'));
src/router.js
import React from 'react/addons';
import BrowserHistory from 'react-router/lib/BrowserHistory';
import { Router, Route, Link } from 'react-router';
class Home extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
<ul>
<li><Link to="/foo/">Foo</Link></li>
<li><Link to="/bar/">Bar</Link></li>
</ul>
</div>
);
}
}
class Foo extends React.Component {
render() {
return (
<div>
<h2>Foo!</h2>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/bar/">Bar</Link></li>
</ul>
</div>
);
}
}
class Bar extends React.Component {
render() {
return (
<div>
<h2>Bar!</h2>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/foo/">Foo</Link></li>
</ul>
</div>
);
}
}
var router = (
<Router history={new BrowserHistory}>
<Route path="/" component={Home} />
<Route path="/foo/" component={Foo} />
<Route path="/bar/" component={Bar} />
</Router>
);
module.exports = router;
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>react-router</title>
</head>
<body>
<div id="example"></div>
<script src="dest/app.js"></script>
</body>
</html>
動作確認
サーバー起動
$ python -m SimpleHTTPServer 8080
メモ
- react-router の
BrowserHistoryを使うとhttp://localhost:8080/#/foo/みたいな#が入らない。ちなみにHashHistoryなどを使うと#が入る。 - react-router v0.13.3 から v1.0.0-beta2 にアプデしてだいぶ変更されたらしい