Rutas y Navegación en Blazor

Introducción

La navegación entre diferentes páginas es un aspecto fundamental en el desarrollo de aplicaciones web. En Blazor, puedes definir rutas para cada página y navegar entre ellas de forma fácil y efectiva. En este tutorial, aprenderás cómo trabajar con rutas y navegación en una aplicación Blazor Server.

Paso 1: Definición de Rutas en Blazor

En Blazor, las rutas se definen utilizando la directiva @page en los archivos Razor (.razor). Esta directiva especifica la ruta relativa de la página en la aplicación.

@page "/mi-pagina"

Paso 2: Navegación entre Páginas

Blazor proporciona varios métodos para la navegación entre páginas:

• Enlaces HTML: Puedes utilizar etiquetas <a> con el atributo href para enlazar a otras páginas de tu aplicación.

<a href="/mi-pagina">Ir a Mi Página</a>

Métodos de Navegación: Blazor proporciona métodos de navegación programática para navegar entre páginas en el código C#.

@code {
    private void IrAMiPagina()
    {
        NavigationManager.NavigateTo("/mi-pagina");
    }
}

Paso 3: Parámetros de Ruta

Puedes incluir parámetros en las rutas de tus páginas para pasar información entre ellas.

@page "/mi-pagina/{id}"

@code {
    [Parameter]
    public string Id { get; set; }
}

Paso 4: Navegación Condicional

En algunos casos, es posible que desees realizar la navegación de forma condicional en función de ciertas condiciones en tu aplicación.

@if (usuarioAutenticado)
{
    <a href="/pagina-secreta">Ir a Página Secreta</a>
}

Paso 5: Configuración de Rutas Predeterminadas

Puedes configurar una ruta predeterminada que se cargará cuando no se especifique ninguna otra ruta.

@page "/"

<h1>Página de Inicio</h1>

Conclusiones

La navegación entre páginas es un aspecto crucial en el desarrollo de aplicaciones web, y Blazor hace que sea fácil y efectivo implementarla. En este tutorial, has aprendido cómo definir rutas, navegar entre páginas, pasar parámetros de ruta y configurar rutas predeterminadas en una aplicación Blazor Server. Con estos conocimientos, podrás crear aplicaciones web Blazor más dinámicas y navegables.