Component Link

Link es un componente de navegación declarativa. Previene la recarga de página y utiliza el historial del navegador.

Toma un objeto como prop, con las siguientes propiedades:

• to (obligatorio): string → ruta destino
• className (opcional): string → Clases CSS adicionales
• …rest (opcional): any → Cualquier otra prop válida para un elemento <a>

Recibe un children, que es el contenido que se renderizará dentro del enlace.

• children (obligatorio): ReactNode → contenido del enlace.

export const Link = ({
  to,
  children,
  className,
  ...rest
}: LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
  const { navigate } = useContext(RouterContext);

  return (
    <a
      href={to}
      className={className}
      onClick={(e) => {
        e.preventDefault();
        navigate(to);
      }}
      {...rest} // se puede agregar más props si es necesario
    >
      {children}
    </a>
  );
};

Ejemplo de uso:

import { Link } from '@arielgonzaguer/michi-router';
// dentro de un componente React
// en este ejemplo "Recetas para gatos rojizos" es el `children`
<Link to="/about" className="nav-link">Recetas para gatos rojizos</Link>