Navegación entre páginas con Symfony y Twig

Construir interfaces reales en Symfony requiere entender cómo se conectan rutas, controladores y vistas. Aquí aprenderás a componer páginas como home e item, enlazarlas con el helper path y aplicar estilos con Tailwind CSS dentro de un flujo de desarrollo claro.

Esta guía es útil si ya tienes un proyecto Symfony inicial y quieres dar el siguiente paso: navegar entre páginas reales y reutilizar una plantilla base.

¿Cómo se configura una nueva página en el controlador de Symfony?

Todo empieza en el controlador. Cada página necesita su propia ruta, su método y su archivo de plantilla asociado.

Para crear la página item, duplicas la estructura del home y ajustas tres elementos clave:

• El nombre de la ruta, en este caso item.
• El nombre del método, también item.
• El archivo de plantilla, que será item.html.twig dentro de la misma carpeta.

Además, puedes pasar variables como el título, por ejemplo Item Page, para que la vista las renderice. Este patrón se repite cada vez que añadas una página nueva.

¿Qué hace el atributo Route en un controlador de Symfony? Define la URL pública y el nombre interno de una página. El nombre se usa luego en Twig para construir enlaces sin escribir la URL a mano.

¿Cómo se estructura la vista home con Twig y Tailwind CSS?

La vista home parte de una plantilla HTML con clases de Tailwind. La idea es simular una lista de elementos repetidos para enfocarte en un solo bloque y luego replicarlo.

Cada ítem visual contiene un div con estilos y una imagen SVG. Ese logo lo agregas al proyecto creando un nuevo archivo, pegando el contenido del SVG y referenciándolo desde la plantilla.

¿Qué cambios necesita base.html.twig?

El archivo base.html.twig actúa como esqueleto de toda la aplicación. Los ajustes son mínimos pero importantes:

• Aplicas un color de fondo a nivel de body.
• Añades un div contenedor para limitar el ancho del contenido.

Con eso, todas las páginas que extiendan de base.html.twig heredarán ese layout sin repetir código.

¿Cómo creas la vista item.html.twig?

Dentro de la carpeta page creas el archivo item.html.twig y pegas un diseño similar al home, pero más simplificado. Al guardar y actualizar el navegador, la nueva vista responde correctamente a su ruta.

Este paso confirma que el flujo está funcionando: ruta, controlador, plantilla y diseño conectados.

¿Cómo funciona la navegación entre páginas en Symfony?

El flujo de navegación en Symfony sigue siempre la misma lógica. Visitas una ruta, esa ruta dispara un método del controlador, y ese método responde con una vista específica.

Para enlazar páginas dentro de Twig se usa el helper path, que recibe el nombre de la ruta como valor. No escribes URLs literales, escribes nombres de rutas.

¿Qué es el helper path en Twig? Es una función que genera URLs a partir del nombre de una ruta definida en el controlador. Si cambias la URL en el futuro, los enlaces siguen funcionando porque dependen del nombre, no de la dirección.

En la práctica se ve así:

• Desde el home, el botón hacia la otra página usa path('item') porque la ruta se llama item.
• Desde item, el botón de regreso usa path('home') porque esa es la ruta raíz configurada en el método correspondiente.

Este mecanismo elimina los enlaces rotos cuando reorganizas tu aplicación.

¿Por qué item.html.twig hereda de base.html.twig?

La herencia de plantillas es uno de los pilares de Twig. La vista item extiende automáticamente de base.html.twig, lo que significa que reutiliza el fondo, el contenedor y cualquier estructura común.

Eso te permite mantener un diseño consistente en toda la aplicación sin duplicar HTML. Si modificas el layout en base.html.twig, el cambio se refleja en home, item y cualquier vista futura que herede de la base.

¿Qué ajustes necesita el archivo CSS del proyecto?

A nivel de estilos, la mayoría de la configuración ya viene resuelta con Tailwind CSS. El único cambio necesario en el archivo CSS es eliminar el bloque body que pueda estar interfiriendo con los estilos aplicados desde la plantilla base.

Con eso liberas el control visual hacia Tailwind y hacia los estilos definidos en base.html.twig.

¿Cómo aplicar lo aprendido en tu propio proyecto?

Ya tienes la primera versión de vistas estructurada en Symfony. El siguiente reto es diseñar un menú propio y lograr que tu barra de navegación funcione enlazando varias páginas con el helper path.

Algunas ideas para empezar:

• Define al menos tres rutas distintas en tu controlador.
• Crea una vista parcial para el menú y úsala en base.html.twig.
• Usa nombres de rutas claros para que los enlaces sean fáciles de leer.

Comparte en los comentarios cómo quedó tu diseño y qué decisiones tomaste para organizar la navegación.