🧭 pattt-router

Mini enrutador SPA hecho con React + TypeScript.
Este proyecto es parte de una práctica del curso de @midudev y tiene fines educativos.

📦 Instalación

npm install pattt-router

🚀 Ejemplo básico de uso

import { Router, Route, Link } from 'pattt-router';

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage },
];

function App() {
  return (
    <>
      <nav>
        <Link to="/">Inicio</Link>
        <Link to="/about">Acerca</Link>
      </nav>

      <Router routes={routes} />
    </>
  );
}

🔁 Uso con children (JSX style)

<Router>
  <Route path="/" component={HomePage} />
  <Route path="/about" component={AboutPage} />
</Router>

🧭 Navegación programática

import { navigateTo } from 'pattt-router';

navigateTo('/about');

📚 API

<Router />

| Prop | Tipo | Requerido | Descripción | |-------------------|-------------------------|-----------|------------------------------------------------------------| | routes | RouteType[] | ❌ | Lista de rutas para renderizar según path. | | defaultComponent| () => JSX.Element | ❌ | Componente a renderizar si no se encuentra una ruta. | | children | Route | Route[] | ❌ | Rutas definidas como hijos del componente Router. |

<Route />

| Prop | Tipo | Requerido | Descripción | |-------------|---------------------|-----------|--------------------------------| | path | string | ✅ | Ruta a comparar con la URL. | | component | () => JSX.Element | ✅ | Componente a renderizar. |

<Link />

| Prop | Tipo | Requerido | Descripción | |-----------|--------------|-----------|---------------------------------------------------| | to | string | ✅ | Ruta a la que se navega al hacer clic. | | target | string | ❌ | Comportamiento de navegación (_self, _blank) | | children| ReactNode | ✅ | Contenido del enlace |

🧩 Tipos

type RouteType = {
  path: string;
  component: () => JSX.Element;
};

🤓 Objetivo

Este paquete fue creado como ejercicio práctico del curso de @midudev para:

• Aprender sobre enrutadores SPA.
• Trabajar con React y TypeScript.
• Publicar librerías propias en npm.
• Organizar código limpio y reutilizable.

No pretende reemplazar soluciones como React Router.

🧑‍💻 Autor

Hecho con ❤️ por @pattt0

📄 Licencia

MIT