Routes Manager

A simple tool to automate the creation of routes from a config file. Used in combination with redux-little-router.

Installation

Install the package and it's peer dependencies using yarn:

$ yarn install routes-manager react redux-little-router

Usage

Define the routes of the application as an array of routes defintions.

const routes = [
  {
    path: '/',
    component: Main
    children: {
      '/groups': [
        {
          path: '/',
          component: Groups,
        }
      ],
      '/users': [
        {
          path: '/',
          component: Users,
        }
      ],
    }
  }
];

And use the Router component as the main entry point of the application. Then, pass the routes to the Router as a prop.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { RouterProvider } from 'redux-little-router';
import { Router } from 'routes-manager';

import store from './store';
import routes from './routes';


ReactDOM.render(
  <Provider store={store}>
    <RouterProvider store={store}>
      <Router routes={routes}>
    </RouterProvider>
  </Provider>
);

Details

Each route config object has the following signature:

{
  path,  // The path in which the route should be rendered
  component,  // The component to rende when the url matches the path
  children,  // More route config objects that should render as `children` props of the main route
}

Also, this package is directly compatible with Fragments from redux-little-router. This means that they can be used in conbination with the route config object for a more granular approach.