npm

npm’s 2019 JavaScript ecosystem survey analysis is now available! Get your copy here »

@isle/routes

0.0.5 • Public • Published

@isle/routes

npm

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

install

npm i @isle/routes

Downloadsweekly downloads

1

version

0.0.5

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability