react-routerを使うまでのメモです。ちなみに、開始地点は、以下の記事のbrowserifyを使うようにしたプロジェクトです。

型定義ファイルをダウンロード

以下のコマンドをうって型定義ファイルをダウンロードしておきます。

tsd install -save react react-dom react-router

ライブラリのダウンロード

以下のコマンドを打ち込んで必要なライブラリをダウンロードします。

npm install react react-dom react-router history

ReactRouterを使う

ReactRouterを使うには、以下のような感じでいきます。Router, Route, IndexRoute, Linkあたりをimportで取り込んでおけばよさげ。

Page1とPage2というコンポーネントと、Appというコンポーネントを作ってみました。Appのthis.props.childrenにPage1とPage2を埋め込もうという感じです。

Linkでページのパスを指定してます。

/// <reference path="../typings/tsd.d.ts" />
import * as React from 'react';
import {Router, Route, IndexRoute, Link} from 'react-router';

export class Page1 extends React.Component<{}, {}> {
    render() {
        return <h1>Page1</h1>;
    }
}

export class Page2 extends React.Component<{}, {}> {
    render() {
        return <h1>Page2</h1>;
    }
}

export class App extends React.Component<React.Props<{}>, {}> {
    render() {
        return <div>
                <header>
                    <h1>React router sample</h1>
                    <Link to="/">Page1</Link>
                    <Link to="/Page2">Page2</Link>
                </header>
                <div>
                    {this.props.children}
                </div>
            </div>;
    }
}

次に、Routerを組み立てます。 Routerタグの中にRouteを仕込む感じです。pathでURLのパスを指定してcomponentで対応するコンポーネントを定義します。

/// <reference path="../typings/tsd.d.ts" />
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Components from './components';
import {Router, Route, IndexRoute, Link} from 'react-router';

var route = <Router>
        <Route path="/" component={Components.App}>
            <IndexRoute component={Components.Page1} />
            <Route path="/Page2" component={Components.Page2} />
        </Route>
    </Router>;

ReactDOM.render(route,
    document.getElementById('content'));

HTMLはこんな感じ。

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>