Router Provider Library

Configuration-based React Router provider with privilege filtering, feature toggles, and state-based routing.

Installation

npm install route-configurator react react-dom react-router react-router-dom mobx mobx-react lodash

Usage

Basic Setup

import { RouterProvider } from "route-configurator";
import type { IRoute, TFeatureEnabledChecker } from "route-configurator";

// Define your routes
const routes: IRoute[] = [
  {
    key: "dashboard",
    path: "/dashboard",
    component: Dashboard,
    privileges: ["DASHBOARD_VIEW"],
  },
  {
    key: "settings",
    path: "/settings",
    component: Settings,
    somePrivileges: ["SETTINGS_READ", "SETTINGS_WRITE"],
  },
];

// Create feature checker function
const isFeatureEnabled: TFeatureEnabledChecker = (key, options) => {
  // Your logic to check privileges
  return userPrivileges.includes(key);
};

// Render provider
<RouterProvider
  routesConfig={routes}
  unAuthorizedRoutes={loginRoutes}
  isAuthorizedUser={isAuthorized}
  layout={MainLayout}
  isFeatureEnabled={isFeatureEnabled}
  systemLoader={YourSystemLoader}
/>;

API

RouterProvider Props

• routesConfig: IRoute[] - Main routes configuration
• unAuthorizedRoutes: IRoute[] - Routes for unauthorized users (login, signup, etc.)
• isAuthorizedUser: boolean - User authorization state
• layout: React.ElementType - Layout component wrapper
• isFeatureEnabled: TFeatureEnabledChecker - Function to check privileges/features
• systemLoader?: React.ElementType - Optional system loader component (default: no-op)

IRoute Interface

Extends react-router's NonIndexRouteObject with:

• key?: string - Unique route identifier
• path?: string - Route path
• originalPath?: string - Original path before transformation
• exact?: boolean - Exact path matching
• loc?: TLocalizationDescription - Menu localization
• redirect?: string - Redirect URL
• priority?: number - Display order (higher = first)
• routes?: IRoute[] - Nested routes
• privileges?: (string | Parameters)[] - Required privileges (all must match)
• somePrivileges?: (string | Parameters)[] - Optional privileges (one must match)
• isRedirectRoute?: boolean - Is redirect-only route
• childRoutesFilter?: Function - Custom filter function
• isLayoutRoute?: boolean - Is layout wrapper
• icon?: React.ElementType - Icon component
• component?: React.ComponentType - Route component
• isBeta?: boolean - Beta feature flag

Utilities

• getRoutes(items) - Prepare routes for rendering
• sortPriority(routes) - Sort by priority (recursive)
• resolveConstraintsInRoutes(routes, isFeatureEnabled, location) - Filter by privileges
• routesMap(routes) - Flatten hierarchical routes
• getBreadcrumbs(path) - Generate breadcrumb trail
• getActiveRouteKeys(routes, path) - Get active route keys
• removeModulesLayer(routes) - Remove module grouping layer

Features

✅ Configuration-based routing
✅ Privilege-based filtering
✅ Feature toggle support
✅ State-based access (auth, initialization)
✅ Hierarchical route support
✅ Breadcrumb generation
✅ Custom route filters
✅ Zero external dependencies (except peer deps)