Gunakan Komponen Router Blazor untuk Mengontrol Navigasi Aplikasi Anda

Sistem routing Blazor menyediakan opsi yang fleksibel untuk memastikan bahwa setiap permintaan pengguna diarahkan ke komponen yang sesuai, sehingga dapat menangani permintaan tersebut dan mengembalikan informasi yang dibutuhkan pengguna.

Bayangkan Anda sedang mengerjakan situs web perusahaan pengiriman pizza. Anda ingin mengatur agar permintaan detail pizza dan detail topping kustom ditangani oleh komponen yang sama. 

Dalam bagian ini, Anda akan belajar cara mengonfigurasi rute di Blazor menggunakan direktif @page.

Menggunakan Template Rute

Ketika pengguna meminta sebuah halaman dari aplikasi web Anda, mereka dapat menentukan informasi yang ingin mereka lihat melalui URI. Contohnya:

http://www.contoso.com/pizzas/margherita?extratopping=pineapple

Setelah protokol dan alamat situs web, URI ini menunjukkan bahwa pengguna ingin melihat informasi tentang pizza Margherita. Selain itu, query string setelah tanda tanya menunjukkan bahwa mereka ingin menambahkan topping ekstra, yaitu nanas.

Di Blazor, Anda menggunakan sistem routing untuk memastikan setiap permintaan dikirim ke komponen yang paling sesuai untuk meresponsnya. Routing juga memastikan bahwa komponen memiliki semua informasi yang diperlukan untuk menampilkan konten yang diinginkan pengguna. Dalam kasus ini, permintaan dapat diarahkan ke komponen Pizzas, yang kemudian akan menampilkan pizza Margherita dengan informasi tentang tambahan topping nanas.

Blazor menangani routing menggunakan komponen khusus yang disebut Router. Komponen ini dikonfigurasi di App.razor seperti berikut:

<Router AppAssembly="@typeof(Program).Assembly">

    <Found Context="routeData">

        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />

    </Found>

    <NotFound>

        <p>Sorry, we haven't found any pizzas here.</p>

    </NotFound>

</Router>

Saat aplikasi dimulai, Blazor memeriksa atribut AppAssembly untuk menentukan assembly mana yang harus dipindai. Blazor kemudian mencari komponen dalam assembly tersebut yang memiliki RouteAttribute. Nilai-nilai ini digunakan untuk menyusun objek RouteData, yang menentukan bagaimana permintaan diarahkan ke komponen yang sesuai. Saat mengembangkan aplikasi, Anda menggunakan direktif @page di setiap komponen untuk menetapkan RouteAttribute.

Pada kode sebelumnya, tag <Found> menentukan komponen yang menangani routing saat runtime, yaitu RouteView. Komponen ini menerima RouteData serta parameter dari URI atau query string. Setelah itu, RouteView akan merender komponen yang sesuai beserta layout-nya. Anda juga dapat menggunakan tag <Found> untuk menentukan layout default yang akan digunakan jika komponen yang dipilih tidak menetapkan layout dengan direktif @layout. Anda akan mempelajari lebih lanjut tentang layout di artikel lainnya di blog ini.

Dalam komponen <Router>, Anda juga dapat menentukan apa yang akan ditampilkan kepada pengguna jika tidak ada rute yang cocok, dengan menggunakan tag <NotFound>. Pada contoh sebelumnya, aplikasi hanya menampilkan satu paragraf <p>, tetapi Anda bisa merender HTML yang lebih kompleks. Misalnya, Anda dapat menambahkan tautan ke halaman beranda atau halaman kontak untuk administrator situs.

Menggunakan Direktif @page

Dalam komponen Blazor, direktif @page digunakan untuk menentukan bahwa komponen tersebut dapat menangani permintaan secara langsung. Anda dapat menetapkan RouteAttribute dalam direktif @page dengan melewatkannya sebagai string.

Sebagai contoh, atribut berikut menunjukkan bahwa halaman akan menangani permintaan ke rute /Pizzas:

@page "/Pizzas"

Jika Anda ingin menetapkan lebih dari satu rute untuk sebuah komponen, gunakan dua atau lebih direktif @page, seperti pada contoh berikut:

@page "/Pizzas"

@page "/CustomPizzas"

Mendapatkan Informasi Lokasi dan Menavigasi dengan NavigationManager

Misalkan Anda membuat sebuah komponen untuk menangani URI yang diminta pengguna, seperti:

http://www.contoso.com/pizzas/margherita/?extratopping=pineapple

Saat menulis komponen, Anda mungkin perlu mengakses informasi navigasi, seperti:

• URI lengkap saat ini, misalnya:
  http://www.contoso.com/pizzas/margherita?extratopping=pineapple
• Base URI, misalnya:
  http://www.contoso.com/
• Jalur relatif dari base URI, misalnya:
  pizzas/margherita
• Query string, misalnya:
  ?extratopping=pineapple

Anda dapat menggunakan objek NavigationManager untuk mendapatkan semua nilai ini. Untuk menggunakannya, Anda harus menyuntikkan (inject) objek tersebut ke dalam komponen, lalu mengakses properti yang tersedia.

Kode berikut menggunakan NavigationManager untuk mendapatkan base URI dari situs web, lalu menggunakannya untuk menetapkan tautan ke halaman utama:

@page "/pizzas"

@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<a href=@HomePageURI>Home Page</a>

@code {

    [Parameter]

    public string PizzaName { get; set; }

    

    public string HomePageURI { get; set; }

    

    protected override void OnInitialized()

    {

        HomePageURI = NavManager.BaseUri;

    }

}

Mengakses Query String dalam Blazor

Untuk mendapatkan query string, Anda perlu menganalisis (parse) URI lengkap. Untuk melakukan parsing ini, gunakan kelas QueryHelpers dari assembly Microsoft.AspNetCore.WebUtilities.

@page "/pizzas"

@using Microsoft.AspNetCore.WebUtilities

@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<p>I want to add this topping: @ToppingName</p>

@code {

    [Parameter]

    public string PizzaName { get; set; }

    

    private string ToppingName { get; set; }

    

    protected override void OnInitialized()

    {

        var uri = NavManager.ToAbsoluteUri(NavManager.Uri);

        if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))

        {

            ToppingName = System.Convert.ToString(extraTopping);

        }

    }

}

Menampilkan Query String dan Navigasi dengan NavigationManager

Dengan komponen sebelumnya yang telah diterapkan, jika pengguna mengakses URI berikut:

http://www.contoso.com/pizzas?extratopping=Pineapple

Maka halaman yang dirender akan menampilkan pesan:

I want to add this topping: Pineapple

Selain mengambil informasi dari query string, Anda juga dapat menggunakan objek NavigationManager untuk mengarahkan pengguna ke komponen lain dalam kode dengan memanggil metode NavigationManager.NavigateTo().

@page "/pizzas/{pizzaname}"

@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<button class="btn" @onclick="NavigateToPaymentPage">

    Buy this pizza!

</button>

@code {

    [Parameter]

    public string PizzaName { get; set; }

    private void NavigateToPaymentPage()

    {

        NavManager.NavigateTo("buypizza");

    }

}

Navigasi Pengguna dengan NavigateTo()

String yang Anda berikan pada metode NavigateTo() adalah URI absolut atau relatif tempat Anda ingin mengarahkan pengguna. Pastikan Anda memiliki komponen yang disiapkan untuk menangani rute tersebut.

Pada kode sebelumnya, komponen dengan direktif @page "/buypizza" akan menangani rute ini.

Menggunakan Komponen NavLink

Pada salah satu contoh sebelumnya, kode digunakan untuk mendapatkan nilai NavigationManager.BaseUri dan menggunakannya untuk menetapkan atribut href pada tag <a> untuk halaman utama. Namun, di Blazor, lebih baik menggunakan komponen NavLink untuk merender tag <a>. Komponen NavLink secara otomatis mengaktifkan kelas CSS ketika atribut href pada link cocok dengan URL saat ini. Dengan menata kelas aktif tersebut, Anda dapat dengan jelas menunjukkan kepada pengguna link navigasi mana yang merujuk ke halaman yang sedang dilihat.

Saat menggunakan NavLink, contoh link ke halaman utama akan terlihat seperti kode berikut:

<NavLink href="/" class="nav-link">Home</NavLink>

Dengan menggunakan NavLink, Anda tidak hanya menyediakan navigasi, tetapi juga mempermudah penataan visual dengan menambahkan kelas aktif ke link yang sesuai dengan halaman yang sedang ditampilkan.

@page "/pizzas"

@inject NavigationManager NavManager

<h1>Buy a Pizza</h1>

<p>I want to order a: @PizzaName</p>

<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>

@code {

    [Parameter]

    public string PizzaName { get; set; }

    public string HomePageURI { get; set; }

    protected override void OnInitialized()

    {

        HomePageURI = NavManager.BaseUri;

    }

}

Atribut Match pada Komponen NavLink

Atribut Match pada komponen NavLink digunakan untuk mengatur kapan link akan diberi highlight (ditandai sebagai aktif). Ada dua opsi yang bisa digunakan:

1. NavLinkMatch.All:
   Ketika Anda menggunakan nilai ini, link hanya akan diberi highlight sebagai link aktif ketika atribut href-nya cocok dengan seluruh URL saat ini. Artinya, link hanya aktif jika URL yang dimaksud sesuai sepenuhnya.

2. NavLinkMatch.Prefix:
   Ketika Anda menggunakan nilai ini, link akan diberi highlight sebagai aktif ketika atribut href-nya cocok dengan bagian awal URL saat ini. Misalnya, jika Anda memiliki link seperti ini:

   <NavLink href="pizzas" Match="NavLinkMatch.Prefix">Pizzas</NavLink>
   

   Link ini akan diberi highlight sebagai aktif ketika URL saat ini adalah http://www.contoso.com/pizzas, dan juga untuk lokasi lain di dalam URL tersebut, seperti http://www.contoso.com/pizzas/formaggio.

   Perilaku ini membantu pengguna memahami bagian situs web mana yang sedang mereka lihat, memberikan gambaran yang lebih jelas tentang struktur navigasi aplikasi.