hina2go

主に技術系のこことか。最近React始めました。

React Routerのチュートリアル Lesson8

前回の続き。

hinathy.hatenablog.com

Lesson8 - Index Routes

これまでの実装では、/にアクセスすると、単にリンク一覧とBlankページが表示されるだけでした。 今回は、Homeコンポーネントを追加して、/にアクセスしたときにHome画面を表示します。

方法1

子要素がないときには、Homeコンポーネントレンダリングする方法です。 具体的には以下のように、{ this.props.children || <Home /> } とします。

class App extends React.Component {

  render() {
    return (
      <div>
        <h1>React Router Tutorial</h1>
        <ul role="nav">
          <li><NavLink to="/about">About</NavLink></li>
          <li><NavLink to="/repos">Repos</NavLink></li>
        </ul>
        { this.props.children || <Home /> }
      </div>
    );
  }
  
}

Homeコンポーネントは以下です。

import React from 'react';

class Home extends React.Component {

  render() {
    return (<div>Home</div>);
  }
  
}

export default Home;

方法2

もう一つの方法は、React Routerが提供するIndexRouteを使う方法です。 方法1のコードを削除して、app/index.jsxを以下のように変更してみます。

ReactDOM.render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo} />
      </Route>
      <Route path="/about" component={About} />
    </Route>
  </Router>
), document.body.appendChild(document.createElement('div')));

IndexRouteにはパスが設定されません。 IndexRouteは、親のパスに正確に一致する場合にレンダリングするコンポーネントを表示します。

ソースコード

github.com