RouterProvider

RouterProvider controla la ruta activa, el matching y la navegación.

Props

Prop	Tipo	Descripción
routes	Route[]	Rutas declaradas de la app
basename	string	Prefijo base cuando la app vive en subruta
notFound	ReactNode	Fallback cuando no hay match
children	ReactNode	Fallback alternativo (si no usa notFound)
layout	ComponentType<{ children: ReactNode }>	Layout global opcional

Detalles de comportamiento

• basename aplica un prefijo base para resolver rutas internas (/app, /admin, etc.).
• Si no hay coincidencia de ruta:
  • usa notFound si está definido;
  • de lo contrario usa children como fallback.
• El matching evalúa rutas en orden; coloque rutas más específicas antes de comodines.

Matching de rutas

Admite:

• Rutas estáticas: /about
• Parámetros: /users/:id
• Wildcard final: /docs/*

Ejemplo

import { RouterProvider } from '@arielgonzaguer/michi-router/core';

const routes = [
  { path: '/', component: <Home /> },
  { path: '/users/:id', component: <UserPage /> },
  { path: '/docs/*', component: <Docs /> }
];

function MainLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>Header</header>
      <main>{children}</main>
    </div>
  );
}

export default function App() {
  return (
    <RouterProvider
      basename="/app"
      routes={routes}
      layout={MainLayout}
      notFound={<h1>404</h1>}
    />
  );
}