react-routes-map v1.1.0

React-routes-map

Simpler asynchronous route loading. Should ideally be used together with webpack for proper code splitting

Example usage

Project structure

src/
  routes/
    index.js
    Home.js
    Projects.js
    ProjectForm/
      index.js
    File.js
    Default.js
index.js

src/routes/index.js

import mapRoutes from 'react-routes-map';

const routes = [
  {
    path: '/home',
    component: 'Home',
    name: 'Home'
  }, {
    path: '/projects',
    component: 'Projects',
    name: 'Projects',
    children: [
      {
        path: '/add',
        component: 'ProjectForm',
      },
    ],
  }, {
    path: '/files/:id'
    component: 'File',
    name: 'File',
  }, {
    path: false,
    component: 'Default',
  }
];

const options = {
  Loading: props => <span>loading...</span>,
  loader() {
    return import(`./${component}`)
      .catch(e => import(`./${component}/index.js`));
  }
}

export default mapRoutes(routes, options);

src/index.js

import React from 'react';
import ReactDom from 'react-dom';
import { BrowserRouter as Router, Switch } from 'react-router-dom';

import routes from './routes';

ReactDom.render(
  <Router>
    <Switch>
      {routes}
    </Switch>
  </Router>
, document.getElementById('root'))