React Routerのチュートリアル Lesson4

前回の続き。

hinathy.hatenablog.com

Lesson 4 - Nested Routes

今回は、Lesson3で追加したハイパーリンクを、全ての画面に表示します。

ReposとAboutをAppの子要素に配置する

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router';

require('../node_modules/bootstrap/dist/css/bootstrap.css');

import App from './components/app';
import About from './components/about';
import Repos from './components/repos';

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

Appで子要素ReposとAboutをレンダリングする

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {

  constructor(props) {
    super(props);
  }

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

export default App;

まとめ

• ハイパーリンク（には限らないけれども）を全ての画面で表示するためには以下をする
  • 全ての画面で表示させたいコンポーネントのRouteをネストさせて、子要素に配置する。
  • 親のコンポーネントでは、子要素をレンダリングする。（this.props.children）

ソースコード

github.com