react-routerのRouteを自動的に設定する

はじめに・・・

browserify + reactify + react-router の構成を想定しての説明ですが、
クライアントサイドで「ディレクトリ配下のファイルを自動的にrequireして〜したい」という他のケースでも参考になると思います。

問題

下のような構成で

components/hoge.jsx
           fuga.jsx
           piyo.jsx

〜.jsxが増える度に↓のようにRouteを追加するのが辛い。

var Hoge = require('./components/hoge');
var Fuga = require('./components/fuga');
var Piyo = require('./components/piyo');

var routes = (
  <Route handler={App} path="/">
    <Route name="hoge" handler={Hoge} />
    <Route name="fuga" handler={Fuga} />
    <Route name="piyo" handler={Piyo} />
  </Route>
);

解決策

https://github.com/substack/bulkify を使う。

npm install --save bulkifyしたあと、package.jsonの "browserify" の箇所にbulkifyを足します。

{
  "browserify": {
    "extension": [
      "jsx",
      "es6"
    ],
    "transform": [
      [
        "reactify",
        {
          "es6": true
        }
      ],
      "bulkify"
    ]
}

すると

var _ = require('lodash');
var bulk = require('bulk-require');
var modules = bulk(__dirname, './components/*');

var routes = (
  <Route handler={App} path='/'>
    {_.map(modules.components, function(component, name) {
        return <Route key={name} name={name} handler={component} />;
    })}
  </Route>
);
// component は requireしたモジュール 例：require('./components/hoge')
// name は ファイル名の拡張子を除いたもの 例：'hoge'

な感じで、自動的にディレクトリ配下のファイルをrequireしてRouteに設定することができます。