LoginSignup
18

More than 5 years have passed since last update.

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

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18