reactjs

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

More than 3 years have passed since last update.


はじめに・・・

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に設定することができます。