【react】react-routerの使い方メモ

はじめに

reactやらreduxやらいじり始めてみたけどわからないことが多い・・・
今回やりたいのはコンポーネント間の画面遷移

とりあえず画面遷移などでのルーティング機能はreact-routerというのを使ってる人が多そうなのでこれの使い方を調べてメモ

構成

.
├── index.js // ルートとなるクラス
├── routes.js // ルーティング周りはここに記述する
└── components // 各ページをここ以下においてゆく
     ├── app.js // 全ページで共通で行いたい処理はここに書きたい
     ├── page1.js
     ├── page2.js
     └── page3.js

index.js

import React from "react";
import { render } from "react-dom";
import { Router, hashHistory } from 'react-router';
import { Provider } from "react-redux";
import store from "./store.js";
import routes from "./routes.js";

render((
    <Provider store={store}>
      <Router children={routes} history={hashHistory} />
    </Provider>
), document.getElementById("root"));

何となくこのファイルは今後もお決まりの形になりそう
※store.jsは今回書かないけどreduxの入門記事とか見るとでてくるので今回はスルー

routes.js

import React from "react";
import { Route } from 'react-router';

import App from "./components/app.js";
import Page1 from "./components/page1.js";
import Page2 from "./components/page2.js";
import Page3 from "./components/page3.js";

const Routes = (
    <Route component={App}>
      <Route path="/" component={page1} />
      <Route path="page1" component={Page1} />
      <Route path="page2/:id" component={Page2} /> { /* ★パラメータ渡しする場合 */ }
      <Route path="page3" component={Page3} />
    </Route>
);
export default Routes;

Appコンポーネントに全画面で共通の処理などを書きたいので、他のRouteをくくる形で設定しました。
今後画面を増やしていくときは、コンポーネントを作成してこのファイルに設定していく形になるかと思います

components/app.js

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

export default class App extends React.Component {
    render() {
	return (
            <div>
              { /* ★各コンポーネントへのリンクはLinkで記述 */ }
              <ul>
                <li><Link to="page1">Page1</Link></li>
                <li><Link to="page2/abc">Page2</Link></li>
                <li><Link to="page3">Page3</Link></li>
              </ul>

               { /* ★Page1、Page2、Page3コンポーネントの内容はココに展開される */ }
              {this.props.children}
            </div>
        );
    }
}

components/page2(page1、page3も同じ)

import React from "react";

export default class Page2 extends React.Component {

    render() {
        return (
            <span>
              <div>page1</div>
              <div>パラメータ={this.props.params.id}</div> { /* ★パラメータ取得 */ }
            </span>
        );
    }
}

さいごに

{this.props.children}で子要素を展開していく書き方が何となくわかりずらかった・・・慣れかな
以上です