-
react-routerが1.0.0になってたらいろいろ仕様が変わっていた話
- 2015年11月11日
- React
- react-router
※この記事は
http://qiita.com/kuniken/items/52b78258d2ed922e06c2
で投稿した内容と同じものです。
あたらしくプロトタイプ作ろ〜って思って、
必要なライブラリをinstall。
とりあえず、indexページだけ表示できるようにしよう。
サーバーサイドにプログラム用意して、クライアントサイドにindex.html置いた。
routeファイルも作ったから、とりあえず動かしてみるぞー。
nodeコマンド実行して、さてブラウザで確認した。
。。あれ、画面が真っ白。Router.runのところでコンソールに
undefined is not function
と出ておる。
しばし試行錯誤の後、react-routerで何か手が加わったのかと邪推し、
gitページ( https://github.com/rackt/react-router )を眺めてみる。
ファイル一覧にUPGRADE_GUIDE.mdというそれらしいファイルを見つける。
https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md
0.13.3 -> 1.0.0
Thanks for your patience 🙂 Big changes. ですって。やれやれ。var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Index = React.createClass({
render: function () {
return (
<div>
<header>
this is header
</header>
{this.props.children} //routerで切り替えたい箇所
<footer>
this is footer
</footer>
</div>
);
}
});
var Entrance = React.createClass({
render: function () {
return (
<div>
<span>ENTRANCE</span>
</div>
);
}
});
var NotFound = React.createClass({
render: function () {
return (
<div>
<span>NOT FOUND</span>
</div>
);
}
});
var routes = (
<Route path="/" component={Index}> //Indexページ
<IndexRoute component={Entrance}/> //Indexページに遷移した際に表示するページ
<Route path="*" component={NotFound}/> //存在しないページに遷移しようとした際に表示するページ
</Route>
);
React.render(
<Router>{routes}</Router>,
document.getElementById('content')
);
この記事を書いた人 : 國田健史
スタッフブログタグ:
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less mongoDB Node.js php PostgreSQL Private Space Promise React react-router reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト セキュリティ ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界
一覧へ戻る
AWS bluebird css CSV docker docker compose electron ES6 es2015 Git Heroku ITコンサルティング JavaScript justinmind less mongoDB Node.js php PostgreSQL Private Space Promise React react-router reactjs Salesforce scss Selenium Builder selenium IDE Selenium WebDriver stylus TypeScript VirtualBox VisualStudioCode vue vuejs webpack システム開発プロジェクト セキュリティ ワイヤーフレーム 上流工程 卒FIT 帳票 要件定義 設計 電力小売業界