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.