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 Tailwind CSS all'interno di React: primi componenti
Inizializzare i container in Azure Container Apps
Creare moduli CSS in React
Reactive form tipizzati con FormBuilder in Angular
Ottimizzazione dei block template in Angular 17
Potenziare Azure AI Search con la ricerca vettoriale
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Semplificare il deployment di siti statici con Azure Static Web App
Implementare l'infinite scroll con QuickGrid in Blazor Server
Utilizzare un service principal per accedere a Azure Container Registry
Usare le variabili per personalizzare gli stili CSS
I più letti di oggi
- annunciato #netstandard 2.1. .NET Core lo supporterà a partire da #netcore3, così come le prossime versione di #xamarin, #mono e #unity.il supporto per #netfx 4.8, invece, non ci sarà. https://aspit.co/bq2
- Annunciato Silverlight 4 RC e Windows Phone Developer Tools
- Speciale Razor: il nuovo view engine di WebMatrix e ASP.NET MVC
- Speciale Windows Store app: costruire app con WinRT per Windows 8
- Gestire lo stato all'interno di un class component di ReactJS
- Inserimenti bulk su database con la classe SqlBulkCopy di ADO.NET 2.0
- disponibile su MSDN la versione RTM di #VS2013 Update 2! https://aspit.co/auj #msTechEd