react-routerでページを共通Layoutに乗せたりログイン画面は乗せなかったりするルーティングの設定

import React from 'react';
import ReactDOM from 'react-dom'
import {Router, Routes, browserHistory} from 'react-router';

import {MyFancyLayout} from '../../layouts';
import {
    LoginPage, // これと
    HomePage,
    SettingPage,
    NotFoundPage, // これは、レイアウト適用外
} from '../../pages';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/login" component={LoginPage} />
        <Route path="/" component={MyFancyLayout}>
            <IndexRoute component={HomePage} />
            <Route path="/home" component={HomePage} />
            <Route path="/settings" component={SettingsPage} />
        </Route>
        <Route path="*" component={NotFoundPage} />
    </Router>,
    document.querySelector('div#app')
);
// こうしとくと、MyFancyLayoutコンポーネントにおいて
// ネストされたroutesで指定されたコンポーネントが
// props.childrenとして得られるので、renderとかで使えばよい

• IndexRoute を定義しないと、/がレンダリングされない
• MyFancyLayoutのRouteで*とするとMyFancyLayoutのprops.childrenがundefinedになる

のでちょっとハマった

DRYな備忘録として

入門 React ―コンポーネントベースのWebフロントエンド開発