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')
);
カテゴリー: 國田健史 | タグ: , | 投稿日: | 投稿者:

solutionware について

クラウド型アプリケーション開発のソリューションウェア https://solutionware.jp/ 【サービス一覧】 クラウド型顧客管理システムの企画・開発 マーケティングオートメーションシステムの企画・開発 各種クラウド型業務システムの企画・開発 スマートフォン/タブレットアプリ(iOS、Android)の企画・開発 Salesforceインプリ、kintoneアプリ、フルスクラッチなど、ご用命にお応えいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

nine + twelve =