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

※この記事は 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')
);