A small library for generating a tree representing routes that also map to paths.
This does two things: saves code and enforces consistency.
Before reapp-routes
var App = require('./components/App');
var Sub = require('./components/app/Sub');
var OtherSub = require('./components/app/OtherSub');
module.exports =
<Route handler={App} path="/">
<Route name="sub" handler={Sub} />
<Route name="otherSub" handler={OtherSub} />
</Route>With reapp-routes
module.exports = routes(require,
route('app',
route('sub'),
route('otherSub')
)
)The routes method reads in the object tree generated by route and determines
the path correspondingly. You can even customize it using the dir property on routes.
In the end, you end up with consistent directory structures that map to your routes,
less requires, less code and a simple routes file.
It does require Webpack or a bundle system that handles dynamic requires.
Using react-router helpers:
var { route, routes } = require('reapp-routes/react-router/generator');
module.exports = routes(require,
route('app', '/', { dir: '' },
route('kitchen', '/',
route('controls'),
route('modals'),
route('popovers'),
route('forms')
),
route('viewer')
)
);Rolling your own:
var React = require('react');
var { Route, DefaultRoute } = require('react-router');
var { route, routes } = require('react-router-generator');
module.exports = generate(routes(
{ dir: 'components/' },
route({ name: 'app', path: '/', dir: '' },
route('kitchen',
route('controls'),
route('modals'),
route('popovers')
)
)
));
function generate(props) {
props.children = props.children ? props.children.map(generate) : null;
props.handler = require(props.handlerPath);
return props.defaultRoute ?
<DefaultRoute {...props} /> :
<Route {...props} />;
}Corresponing file tree, notice how dir affects nesting:
/components
/kitchen
Controls.jsx
Modals.jsx
Popovers.jsx
Kitchen.jsx
App.jsx
- Document, tests
See the index.js for more in-code documentation.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent