Programemos Cosas: route

domingo, 29 de junio de 2025

La función route en Laravel+Inertia

De pronto aparece una función route que no está importada y no sé de dónde viene. Quiero saberlo.

¡Ah, la misteriosa función route! Este es un escenario muy común cuando trabajas con Laravel e Inertia.js en el frontend. La función route() que estás viendo en tu código JavaScript (React, Vue, etc.) no es una función global de JavaScript ni una característica nativa del navegador.

Viene de un paquete o configuración que se encarga de exponer tus rutas de Laravel al frontend de JavaScript. Esto es increíblemente útil porque te permite usar los nombres de tus rutas de Laravel directamente en tu código JavaScript, en lugar de tener que codificar URLs manualmente (ej. /dashboard/users/1).

¿De dónde viene `route()`?

La función route() en el contexto de Laravel + Inertia.js (o cualquier frontend JS que consuma rutas de Laravel) proviene casi con certeza del paquete Ziggy.

¿Qué es Ziggy?

Ziggy es un paquete de Laravel que permite usar tus rutas definidas en Laravel directamente en tu JavaScript. Lo hace generando un archivo JavaScript con todas tus rutas, que luego es cargado en el frontend.

Cómo funciona (en alto nivel):

Configuración en Laravel: Instalás Ziggy en tu proyecto Laravel (composer require tightenco/ziggy).
Generación de Rutas: Configurás Ziggy para que genere un archivo JavaScript (o exponga las rutas globalmente) con todas tus rutas de Laravel. Esto generalmente se hace incluyendo la directiva @routes en tu plantilla Blade principal (ej. app.blade.php).
Disponibilidad en Frontend: Cuando tu aplicación de React (via Inertia) se carga, ese script generado por Ziggy ya se ha cargado en el navegador, haciendo que la función global route() esté disponible para que la uses.

¿Por qué se usa `route()`?

Evitar Hardcoding de URLs: En lugar de escribir Link href="/dashboard/users/1" o axios.get('/api/products'), puedes usar Link href={route('dashboard.users.show', { user: 1 })} o axios.get(route('api.products.index')).
Centralización de Rutas: Si cambias la URL de una ruta en tu web.php o api.php de Laravel, solo necesitas cambiarla allí. Ziggy se encargará de actualizar la función route() en el frontend, y no tendrás que buscar y reemplazar manualmente en todo tu código JavaScript.
Manejo de Parámetros: La función route() te permite pasar parámetros directamente (ej. route('posts.show', { post: 5 })), y Ziggy se encarga de incrustarlos correctamente en la URL.
Consistencia: Mantiene tu frontend y backend sincronizados en cuanto a las URLs.

¿Cómo verificarlo?

Revisa composer.json: Busca tightenco/ziggy en la sección require. Si está ahí, es casi seguro que Ziggy es la fuente.
JSON
"require": { // ... otras dependencias "tightenco/ziggy": "^2.0" // La versión puede variar },

Revisa resources/views/app.blade.php (o tu plantilla principal): Busca la directiva @routes.

Blade

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        {{-- ... --}}
        @routes {{-- <-- Esta es la clave --}}
        @viteReactRefresh
        @vite(['resources/js/app.jsx', 'resources/css/app.css'])
        @inertiaHead
    </head>
    {{-- ... --}}
</html>

Inspecciona el HTML generado en el navegador: Abre las herramientas de desarrollador de tu navegador (F12), ve a la pestaña "Elements" y busca en la sección <head> o al final del <body> un script que contenga la definición de la función route o un script cargado desde /ziggy/routes. A menudo, Ziggy inyecta un script similar a:

HTML
<script type="text/javascript">
    const Ziggy = {
        url: "http://localhost",
        port: null,
        defaults: {},
        routes: {
            "dashboard.index": {
                "uri": "dashboard",
                "methods": ["GET", "HEAD"]
            },
            // ... más rutas
        }
    };
    // Y luego la función global `route` se define usando Ziggy
    if (typeof window.route === 'undefined') {
        window.route = function (name, parameters, absolute, customUrl) { /* ... */ };
    }
</script>

Si encuentras cualquiera de estas indicaciones, la "misteriosa" función route() viene de Ziggy, y es una característica muy poderosa y útil para integrar tu backend Laravel con tu frontend de React/Inertia.