Ludo Programming

🔍 Ce este routing-ul în Blazor?

Routing-ul permite aplicatiei tale sa raspunda la diferite URL-uri si sa afiseze continut specific pentru fiecare. In Blazor, acest lucru este realizat cu ajutorul directivei @page si al componentelor NavLink.

📄 Cum functioneaza

In Blazor, fiecare componenta care trebuie sa fie accesibila printr-un URL trebuie sa inceapa cu o directiva @page.

Exemplu:

@page "/about"

<h3>Despre aplicație</h3>
<p>Aceasta este o pagină despre aplicație.</p>

Aceasta componenta va fi afisata cand utilizatorul acceseaza https://site-ul-tau/about.

🧭 Navigare cu 

NavLink

Blazor ofera componenta NavLink, care functioneaza ca un hyperlink, dar adauga automat o clasa CSS activa atunci cand URL-ul este activ.

<NavLink href="/" Match="NavLinkMatch.All">
    Acasă
</NavLink>

<NavLink href="/about">
    Despre
</NavLink>

🔎 Match="NavLinkMatch.All" inseamna ca linkul va fi activ doar când URL-ul este exact.

📌 Parametrii în URL

Blazor permite transmiterea de date în URL sub forma de parametri.

Exemplu:

@page "/profile/{username}"

<h3>Profilul utilizatorului: @username</h3>

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

Navigand la /profile/ludo, pagina va afisa „Profilul utilizatorului: ludo”.

🧪 Exemplu complet: Home / About / Contact

1. Pages/Home.razor

@page "/"

<h3>Acasă</h3>
<p>Bine ai venit în aplicația noastră Blazor!</p>

2. Pages/About.razor

@page "/about"

<h3>Despre</h3>
<p>Informații despre aplicație și autor.</p>

3. Pages/Contact.razor

@page "/contact"

<h3>Contact</h3>
<p>Trimite-ne un mesaj!</p>

4. NavMenu.razor

<NavLink href="/" Match="NavLinkMatch.All">Acasă</NavLink>
<NavLink href="/about">Despre</NavLink>
<NavLink href="/contact">Contact</NavLink>

🏁 Concluzie

Navigarea este parte esentiala dintr-o aplicatie web. Blazor face routing-ul intuitiv, declarativ si puternic prin @page, NavLink si parametri in URL. In urmatorul articol, vom crea componente reutilizabile si vom invata sa transmitem date intre ele prin @Parameter.