@isle/routes v0.0.5

@isle/routes

Isle utilities for React routers. Currently supports Reach Router and React Router.

Usage

createRoutes

The createRoutes function maps an array of routes (which have a component string that references a file under the ./pages directory and can have any additional props supported by the routing library) into an array of asynchronously loaded React components.

This function imports the file using a dynamic import (supported by webpack) and then wraps it with a Loadable component from the React Loadable library. Any additional options passed to the createRoutes function will get passed to the Loadable function (see more).

import { createRoutes } from '@isle/routes';
import Loading from './components/Loading';

const routes = [
  {
    component: 'Home',
    path: '/'
  },
  {
    component: '404',
    default: true
  }
];

const routeElements = createRoutes({ routes, loading: Loading });

Assuming you are using Reach Router, you can now create your router as follows:

import React from 'react';
import { render } from 'react-dom';
import { Router } from '@reach/router';

render(
  <Router>{routeElements}</Router>,
  document.getElementById('root')
);

License

MIT © Hugo Manrique