React Routerのチュートリアル Lesson8
前回の続き。
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
は、親のパスに正確に一致する場合にレンダリングするコンポーネントを表示します。