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
Utilizzare i nuovi piani dedicati di Azure Container Apps
Controllare gli accessi IP alle app con Azure Container Apps
Disabilitare automaticamente un workflow di GitHub
Usare le collection expression per inizializzare una lista di oggetti in C#
Short-circuiting della Pipeline in ASP.NET Core
Usare lo spread operator con i collection initializer in C#
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Hosting di componenti WebAssembly in un'applicazione Blazor static
Gestire undefined e partial nelle reactive forms di Angular
Creare moduli CSS in React
Eseguire attività con Azure Container Jobs
Modificare i metadati nell'head dell'HTML di una Blazor Web App