domingo, 29 de junio de 2025

Head, Link y usePage from @inertiajs/react

 ¿Qué significa el siguiente código?

import { Head, Link, usePage } from '@inertiajs/react';


Este fragmento de código es una declaración de importación de JavaScript (ES Modules).

Indica que se están importando tres elementos específicos desde la librería @inertiajs/react para ser utilizados en el archivo donde se encuentra esta línea de código.

Desglose de cada elemento importado:

  1. Head:

    • ¿Qué es? Es un componente de React proporcionado por Inertia.js.

    • Función: Permite modificar el contenido de la sección <head> de tu documento HTML directamente desde tus componentes de React. Piensa en ello como una forma de controlar elementos como el título de la página (<title>), meta etiquetas (<meta name="description" content="...">), enlaces a hojas de estilo externas (<link rel="stylesheet" href="...">), o incluso scripts (<script>), de forma dinámica y declarativa dentro de tu aplicación SPA.

    • Uso típico: Lo usarías para establecer el título de la página cuando el usuario navega a una nueva vista o para cambiar meta descripciones para SEO.

      JavaScript
      <Head title="Mi Página de Perfil" />

  2. Link:

    • ¿Qué es? Es un componente de React proporcionado por Inertia.js que actúa como un reemplazo inteligente para las etiquetas <a> de HTML.

    • Función: En una aplicación SPA (Single Page Application) como las que construye Inertia, no quieres que cada clic en un enlace recargue la página completa (lo que ocurriría con un <a> tradicional). El componente Link de Inertia intercepta los clics en los enlaces y realiza una solicitud AJAX al servidor de Laravel, actualizando solo el contenido de la página sin una recarga completa. Esto es lo que le da la sensación de una SPA.

    • Uso típico: Para cualquier enlace de navegación interno en tu aplicación.

      JavaScript
      <Link href="/dashboard">Ir al Dashboard</Link>
<Link href="/logout" method="post" as="button" type="button">Cerrar Sesión</Link>

  3. usePage:

    • ¿Qué es? Es un Hook de React proporcionado por Inertia.js.

    • Función: Permite acceder a los props (datos) y otros metadatos de la página actual que han sido compartidos por el backend de Laravel. Cuando un controlador de Laravel renderiza una página de Inertia (ej. return Inertia::render('MyPage', ['user' => $user]);), esos datos (user en este caso) están disponibles en el frontend a través de usePage().

    • Uso típico: Para obtener los datos que tu backend te pasó, o para acceder a datos globales compartidos con todas las páginas (como el usuario autenticado).

      JavaScript
      import { usePage } from '@inertiajs/react';

function UserProfile() {
  const { props } = usePage(); // Accede a todos los props
  const user = props.user; // O si el prop se llama 'user' directamente
  // const { user } = usePage().props; // Otra forma común

  return (
    <div>
      <h1>Bienvenido, {user.name}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

En resumen:

Este fragmento de código es la base para construir las interfaces de usuario en el frontend de una aplicación Laravel con Inertia.js y React. Proporciona las herramientas esenciales para:

  • Controlar los elementos de la etiqueta <head> de la página (Head).

  • Manejar la navegación interna de la SPA (Link).

  • Acceder a los datos compartidos desde el backend de Laravel (usePage).

Juntos, estos elementos facilitan la creación de una aplicación React de una sola página que se siente como una aplicación cliente-servidor tradicional, pero con la interactividad y la fluidez de una SPA.

Publicado por en
Etiquetas: , , , , , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)