react-dynamic-lazy-routing

react-dynamic-lazy-routing is a React component that facilitates lazy loading of routes using a configuration object. This package utilizes react-router-dom to handle routing in a React application, allowing for performance optimization through code-splitting and deferred loading of components.

Features

• Lazy Loading: Load your components only when needed.
• Configuration Based: Define all your routes through a simple JavaScript object.
• Nested Routing: Supports nested routes to cater complex application structures.

Prerequisites

Before installing react-dynamic-lazy-routing, ensure you have react and react-router-dom installed in your project as these are peer dependencies.

npm install react react-router-dom
Installation
Install react-dynamic-lazy-routing using npm:

Bash
npm install react-dynamic-lazy-routing
Usage
Define Route Configuration: Create a routesConfiguration.js file in your project that exports an array of route definitions.
JavaScript
// routesConfiguration.js
const routesConfig = [
  {
    path: "/",
    name: "Home",
    lazyComponent: () => import('./pages/Home')
  },
  {
    path: "/about",
    lazyComponent: () => import('./pages/About')
  },
  {
    path: "/contact",
    lazyComponent: () => import('./pages/Contact')
  },
  {
    path: "/nested",
    children: [
      {
        index: true,
        lazyComponent: () => import('./pages/Nested')
      },
      {
        path: "child",
        lazyComponent: () => import('./pages/Child')
      }
    ]
  }
];

export default routesConfig;
Import and Use RouterElement: Import RouterElement from react-dynamic-lazy-routing and use it in your App component.
JavaScript
// App.js
import React from 'react';
import { RouterElement } from 'react-dynamic-lazy-routing';
import routesConfig from './routesConfiguration';

function App() {
  return <RouterElement routesConfig={routesConfig} />;
}

export default App;
Contributing
Contributions are always welcome! Please read the contributing guidelines first to make the process easy and effective for everyone involved.

License
Distributed under the MIT License. See LICENSE for more information.

Support
For support, email [email protected].