@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')
);