React Routerのチュートリアル Lesson2

前回の続き。

hinathy.hatenablog.com

Lesson2 - Rendering a Route

今回は、React Routerを導入して、About画面とRepos画面を追加します。

React Routerのインストール

事前に、React Routerをインストールしておきます。

$ npm install react-router --save

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'

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

画面を追加する

新たに、ReposとAboutコンポーネントを追加します。

• About

import React from 'react';
import ReactDOM from 'react-dom';

export default class About extends React.Component {

  constructor(props) {
    super(props);
  }
  
  render() {
    return (<div>About</div>);
  }

}

• Repos

import React from 'react';
import ReactDOM from 'react-dom';

export default class Repos extends React.Component {

  constructor(props) {
    super(props);
  }

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

}

最後に、RouteでURLとコンポーネントを紐付けます。

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} />
    </Router>
  ),
  document.body.appendChild(document.createElement('div'))
);

以上で、http://localhost:8080/#/aboutとかhttp://localhost:8080/#/reposにアクセスすると各ページが表示されるはずです。

まとめ

• Routerをルートノードに配置する。
• Routerノードの子要素にRouteノードを含める。
• Routeノードで、URLとコンポーネントを紐付ける。

ソースコード

github.com