Guía rápida

1. Instale el paquete

npm install @arielgonzaguer/michi-router

## o con pnpm

pnpm add @arielgonzaguer/michi-router

Requisitos

• React 17 o superior

Verificación rápida

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

Si el import resuelve sin errores, la instalación está correcta.

2. Cree su router

Nota: Este es un ejemplo rápido. Los componentes de página pueden crearse en archivos separados para mejor organización.

import React from 'react';
import {
  RouterProvider as MichiProvider, // alias recomendado por motivos felinos
  Link,
  useNavigate,
  useParams
} from '@arielgonzaguer/michi-router/core';
import { Protected } from '@arielgonzaguer/michi-router/protected';

function Home() {
  const navigate = useNavigate();
  return (
    <>
      <h1>Inicio</h1>
      <Link to="/users/42">Ver usuario</Link>
      <button onClick={() => navigate('/search?q=michi#top')}>Buscar</button>
    </>
  );
}

function UserPage() {
  const { id } = useParams<{ id: string }>();
  return <h1>User {id}</h1>;
}

function Login() {
  return <h1>Login</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default function AppRouter() {
  const auth = { user: null, isLoading: false };

  return (
    <MichiProvider
      basename="/app"
      routes={[
        { path: '/', component: <Home /> },
        { path: '/users/:id', component: <UserPage /> },
        { path: '/login', component: <Login /> },
        {
          path: '/dashboard',
          component: (
            <Protected
              configObject={{
                states: auth,
                redirectionPath: '/login',
                defaultMessage: 'Verificando sesión...'
              }}
            >
              <Dashboard />
            </Protected>
          )
        }
      ]}
      notFound={<h1>404</h1>}
    />
  );
}

3. Móntelo en App.tsx

import AppRouter from './AppRouter';

export default function App() {
  return <AppRouter />;
}

4. Navegación avanzada rápida (useNavigate)

const navigate = useNavigate();

// push normal (agrega historial)
navigate('/profile');

// replace (reemplaza historial actual)
navigate('/dashboard', { replace: true });

// state (metadatos asociados a la entrada)
navigate('/checkout', { state: { source: 'cart' } });