react-routerが1.0.0になってたらいろいろ仕様が変わっていた話

あたらしくプロトタイプ作ろ〜って思って、
必要なライブラリを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.

ですって。やれやれ。

route.js

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')
);