RouterLayout

RouterLayout es una biblioteca de React que proporciona una forma sencilla y eficiente de manejar rutas en aplicaciones React utilizando react-router-dom. Esta biblioteca permite la carga diferida de componentes y la gestión de layouts, lo que mejora la experiencia del usuario al navegar por la aplicación.

Características

• Carga diferida: Utiliza React.Suspense para cargar componentes de forma asíncrona.
• Configuración sencilla: Define tus rutas y layouts de manera clara y concisa.
• Manejo de errores: Proporciona un elemento de error predeterminado para manejar fallos en la carga de componentes.

Instalación

Para instalar RouterLayout, usa npm o yarn:

npm install router-layout

Uso

A continuación se muestra un ejemplo básico de cómo utilizar RouterLayout en tu aplicación React:

import React, { lazy } from 'react';
import { RouterLayout } from 'router-layout';

interface RouteConfig {
    path: string;
    component: React.LazyExoticComponent<React.ComponentType<any>> | any;

}

const Home = lazy(() => import('@/pages/Home'));
const About = lazy(() => import('@/pages/About'));
const Contact = lazy(() => import('@/pages/Contact'));

const routes: RouteConfig[] = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact },
];

const SimpleLayout = ({ children }: { children: React.ReactNode }) => (
    <div>
        <header>
            <nav>
                {/* Links a las rutas */}
            </nav>
        </header>
        <main>{children}</main>
        <footer>
            {/* Footer */}
        </footer>
    </div>
);

const App = () => (
    <RouterLayout
        routes={routes}
        layout={SimpleLayout}
        fallback={<div>Loading...</div>}
    />
);

export default App;

Propiedades

• routes: Un array de objetos que define las rutas. Cada objeto debe contener:

  • path: La ruta correspondiente.
  • component: El componente que se cargará para esa ruta.

• layout: (Opcional) Un componente que se usará como layout para las rutas. Si no se proporciona, se renderizará sin un layout.

• fallback: (Opcional) Un componente que se mostrará mientras se cargan los componentes.