Guía rápida

Empiece a usar MichiRouter con esta guía rápida en menos de 10 minutos. Remplaze las páginas del ejemplo por las suyas, al igual que la store de autenticación y el componente de Layout, y modifique el objeto de configuración si necesita usar el componente Protected.

Requisitos previos

• Tener un proyecto de React 17+ creado con Vite.
• Tener una store o contexto para manejar la autenticación (opcional, pero recomendado).

1. Ejecute:

npm install @arielgonzaguer/michi-router

2. Cree un archivo MichiRouter.tsx y configure el router:

MichiRouter.tsx

// enrutado
import {
  RouterProvider as MichiProvider,
  Protected,
} from "@arielgonzaguer/michi-router";

// componentes / páginas
import Landing from "../pages/Landing";
import LoginPage from "../pages/LoginPage";
import ResetContraseña from "./ResetContraseña";

import Home from "../pages/Home";
import NotFound404 from "../components/NotFound404";

import ActualizarKegs from "../pages/ActualizarKegs";
import VerKegInfoScan from "./VerKegInfoScan";

import Configuracion from "../pages/Configuracion";

// layout
import BaseLayout from "../layouts/BaseLayout";

// store que maneja autenticación
import useAuthStore from "../store/useAuthStore";

export function MichiRouter() {
  // objeto de configuración para Protected → opcional. Solo si usa Protected
  const configObject = {
    states: useAuthStore(),
    redirectionPath: "/",
    loadingComponent: (
      <div className="w-full h-screen flex items-center justify-center">
        Cargando...
      </div>
    ),
    defaultMessage: undefined,
  };

  const rutas = [
    { path: "/", component: <Landing /> },
    { path: "/login", component: <LoginPage /> },
    { path: "/reset-password", component: <ResetContraseña /> },
    {
      path: "/home",
      component: (
        <Protected configObject={configObject}>
          <Home />
        </Protected>
      ),
    },
    {
      path: "/actualizar-kegs",
      component: (
        <Protected configObject={configObject}>
          <ActualizarKegs />
        </Protected>
      ),
    },
    {
      path: "/ver-kegs-scan",
      component: (
        <Protected configObject={configObject}>
          <VerKegInfoScan />{" "}
        </Protected>
      ),
    },
    {
      path: "/configuracion",
      component: (
        <Protected configObject={configObject}>
          <Configuracion />
        </Protected>
      ),
    },
  ];
  return (
    <RouterProvider routes={rutas} layout={BaseLayout}>
      <NotFound404 />
    </RouterProvider>
  );
}

3. En su App.tsx, importe y use el componente MichiRouter:

App.tsx

// componente raíz de la app

import { MichiRouter } from "./MichiRouter";

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