Il routing in Blazor è abbastanza limitato, e tra le varie lacune, non possiede un sistema per la generazione degli URL. Pertanto, tutte le volte che dobbiamo creare un link a una pagina, la soluzione più semplice è quella di scriverlo in forma di stringa.
<li class="nav-item px-3"> <NavLink class="nav-link" href="counter"> Counter </NavLink> </li>
Come sappiamo, questo approccio è soggetto a potenziali errori di battitura, e soprattutto mal si presta a refactoring dovesse la nostra logica di routing cambiare in futuro.
Fortunatamente, possiamo facilmente creare una classe in grado di creare il link in maniera dinamica, in base al contenuto della direttiva @page del componente:
public static class RouteHelper { public static string GetUrl<TComponent>() where TComponent : ComponentBase { Type type = typeof(TComponent); var att = type.GetCustomAttributes(typeof(RouteAttribute), inherit: false) .OfType<RouteAttribute>() .SingleOrDefault(); if (att == null) return null; return att.Template; } }
Questa direttiva, infatti, viene tradotta in fase di compilazione con l'attributo RouteAttribute. Il codice in alto, non fa altro che recuperarlo dalla classe del componente e restituirlo come risultato.
A questo punto, potremo riscrivere il nostro link precedente come segue, con il vantaggio di non dover più usare una stringa statica, bensì facendo riferimento all'oggetto su cui vogliamo navigare.
<NavLink class="nav-link" href="@(RouteHelper.GetUrl<Counter>()"> <span class="oi oi-plus" aria-hidden="true"></span> Counter </NavLink>
In questo modo, la definizione della route resta centralizzata sul componente Counter e, se dovessimo cambiarla, tutti i link si adegueranno di conseguenza.
Quanto visto finora è solo un semplice punto di partenza, che non supporta ancora due importanti use case: Route con parametri e Route multiple. Ce ne occuperemo in uno dei prossimi script.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Routing statico e PreRendering in una Blazor Web App
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Creare gruppi di client per Event Grid MQTT
Elencare le container images installate in un cluster di Kubernetes
Utilizzare un service principal per accedere a Azure Container Registry
Gestire i null nelle reactive form tipizzate di Angular
Utilizzare la session affinity con Azure Container Apps
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Usare il versioning con i controller di ASP.NET Core Web API
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Utilizzare politiche di resiliency con Azure Container App