perutean dan navigasi inti Blazor ASP.NET

Perutean statis versus interaktif

Bagian ini berlaku untuk Blazor Web Apps.

Jika pra-penyajian diaktifkan, Blazor router (Router komponen, <Router> dalam Routes.razor) melakukan perutean statis ke komponen selama penyajian sisi server statis (SSR statis). Jenis perutean ini disebut perutean statis.

Ketika mode render interaktif ditetapkan ke Routes komponen, Blazor router menjadi interaktif setelah SSR statis dengan perutean statis di server. Jenis perutean ini disebut perutean interaktif.

Router statis menggunakan perutean titik akhir dan jalur permintaan HTTP untuk menentukan komponen mana yang akan dirender. Ketika router menjadi interaktif, router menggunakan URL dokumen (URL di bilah alamat browser) untuk menentukan komponen mana yang akan dirender. Ini berarti bahwa router interaktif dapat secara dinamis mengubah komponen mana yang dirender jika URL dokumen berubah secara dinamis ke URL internal lain yang valid, dan dapat melakukannya tanpa melakukan permintaan HTTP untuk mengambil konten halaman baru.

Perutean interaktif juga mencegah prarender karena konten halaman baru tidak diminta dari server dengan permintaan halaman normal. Untuk informasi selengkapnya, lihat Razor ASP.NET Core.

Komponen ini Router memungkinkan perutean ke Razor komponen dan terletak di komponen aplikasi Routes (Components/Routes.razor).

Komponen memungkinkan Router perutean ke Razor komponen. Komponen Router digunakan dalam App komponen (App.razor).

@page "/blazor-route"
@page "/different-blazor-route"

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

@page "/blazor-route"
@page "/different-blazor-route"

<PageTitle>Routing</PageTitle>

<h1>Routing Example</h1>

<p>
    This page is reached at either <code>/blazor-route</code> or 
    <code>/different-blazor-route</code>.
</p>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

@page "/blazor-route"
@page "/different-blazor-route"

<h1>Blazor routing</h1>

Router tidak berinteraksi dengan nilai string kueri. Untuk bekerja dengan string kueri, lihat bagian String kueri .

Memfokuskan elemen pada navigasi

Komponen FocusOnNavigate mengatur fokus UI ke elemen berdasarkan pemilih CSS setelah menavigasi dari satu halaman ke halaman lainnya.

<FocusOnNavigate RouteData="routeData" Selector="h1" />

Router Saat komponen menavigasi ke halaman baru, FocusOnNavigate komponen mengatur fokus ke header tingkat atas halaman (<h1>). Ini adalah strategi umum untuk memastikan bahwa navigasi halaman diumumkan saat menggunakan pembaca layar.

Bagian ini berlaku untuk Blazor Web Apps.

Router Gunakan parameter komponen AdditionalAssemblies dan penyusun AddAdditionalAssemblies konvensi titik akhir untuk menemukan komponen yang dapat dirutekan dalam rakitan tambahan. Sub bagian berikut menjelaskan kapan dan bagaimana menggunakan setiap API.

Perutean statik

Untuk menemukan komponen yang dapat dirutekan dari rakitan tambahan untuk penyajian sisi server statis (SSR statis), bahkan jika router nantinya menjadi interaktif untuk penyajian interaktif, rakitan harus diungkapkan ke Blazor kerangka kerja. AddAdditionalAssemblies Panggil metode dengan rakitan tambahan yang ditautkan ke MapRazorComponents dalam file proyek Program server.

Contoh berikut mencakup komponen yang dapat dirutekan dalam perakitan BlazorSample.Client proyek menggunakan file proyek _Imports.razor :

app.MapRazorComponents<App>()
    .AddAdditionalAssemblies(typeof(BlazorSample.Client._Imports).Assembly);

Perutean interaktif

Mode render interaktif dapat ditetapkan ke Routes komponen (Routes.razor) yang membuat Blazor router menjadi interaktif setelah SSR statis dan perutean statis di server. Misalnya, <Routes @rendermode="InteractiveServer" /> menetapkan penyajian sisi server interaktif (SSR interaktif) ke Routes komponen. Komponen Router mewarisi penyajian sisi server interaktif (SSR interaktif) dari Routes komponen. Router menjadi interaktif setelah perutean statis di server.

Navigasi internal untuk perutean interaktif tidak melibatkan permintaan konten halaman baru dari server. Oleh karena itu, pra-penyajian tidak terjadi untuk permintaan halaman internal. Untuk informasi selengkapnya, lihat Razor ASP.NET Core.

Routes Jika komponen didefinisikan dalam proyek server, AdditionalAssemblies parameter Router komponen harus menyertakan perakitan .Client proyek. Ini memungkinkan perute bekerja dengan benar ketika dirender secara interaktif.

Dalam contoh berikut, Routes komponen berada dalam proyek server, dan _Imports.razor file BlazorSample.Client proyek menunjukkan perakitan untuk mencari komponen yang dapat dirutekan:

<Router
    AppAssembly="..."
    AdditionalAssemblies="[ typeof(BlazorSample.Client._Imports).Assembly ]">
    ...
</Router>

Rakitan tambahan dipindai selain rakitan yang ditentukan ke AppAssembly.

Atau, komponen yang dapat dirutekan hanya ada dalam .Client proyek dengan Interaktif WebAssembly global atau Rendering otomatis yang diterapkan, dan Routes komponen didefinisikan dalam .Client proyek, bukan proyek server. Dalam hal ini, tidak ada rakitan eksternal dengan komponen yang dapat dirutekan, sehingga tidak perlu menentukan nilai untuk AdditionalAssemblies.

Bagian ini berlaku untuk Blazor Server aplikasi.

Router Gunakan parameter komponen AdditionalAssemblies dan penyusun AddAdditionalAssemblies konvensi titik akhir untuk menemukan komponen yang dapat dirutekan dalam rakitan tambahan.

Dalam contoh berikut, Component1 adalah komponen yang dapat dirutekan yang ditentukan dalam pustaka kelas komponen yang dirujuk bernama ComponentLibrary:

<Router
    AppAssembly="..."
    AdditionalAssemblies="new[] { typeof(ComponentLibrary.Component1).Assembly }">
    ...
</Router>

Rakitan tambahan dipindai selain rakitan yang ditentukan ke AppAssembly.

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Blazor is @Text!</p>

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

@page "/route-parameter-1/{text}"

<PageTitle>Route Parameter 1</PageTitle>

<h1>Route Parameter Example 1</h1>

<p>Blazor is @Text!</p>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

@page "/route-parameter-1/{text}"

<h1>Blazor is @Text!</h1>

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

Parameter opsional didukung. Dalam contoh berikut, parameter opsional text menetapkan nilai segmen rute ke properti Text komponen. Jika segmen tidak ada, nilai Text diatur ke fantastic.

Parameter opsional tidak didukung. Dalam contoh berikut, dua @page arahan diterapkan. Direktif pertama mengizinkan navigasi ke komponen tanpa parameter. Direktif kedua menetapkan {text} nilai parameter rute ke properti komponen Text .

@page "/route-parameter-2/{text?}"

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

<p>Blazor is @Text!</p>

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

    protected override void OnParametersSet() => Text = Text ?? "fantastic";
}

@page "/route-parameter-2/{text?}"

<PageTitle>Route Parameter 2</PageTitle>

<h1>Route Parameter Example 2</h1>

<p>Blazor is @Text!</p>

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

    protected override void OnParametersSet() => Text = Text ?? "fantastic";
}

@page "/route-parameter-2/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/route-parameter-2/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/route-parameter-2/{text?}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/route-parameter-2"
@page "/route-parameter-2/{text}"

<h1>Blazor is @Text!</h1>

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

    protected override void OnParametersSet()
    {
        Text = Text ?? "fantastic";
    }
}

Batasan rute juga berfungsi dengan parameter opsional. Dalam contoh berikut, Id diperlukan, tetapi Option merupakan parameter rute boolean opsional.

User.razor:

@page "/user/{id:int}/{option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

@code {
    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public bool Option { get; set; }
}

Perutean dengan URL yang berisi titik-titik

Templat rute default sisi server mengasumsikan bahwa jika segmen terakhir URL permintaan berisi titik (.) yang diminta file. Misalnya, URL /example/some.thing relatif ditafsirkan oleh router sebagai permintaan untuk file bernama some.thing. Tanpa konfigurasi tambahan, aplikasi mengembalikan respons 404 - Tidak Ditemukan jika some.thing dimaksudkan untuk merutekan ke komponen dengan @page direktif dan some.thing merupakan nilai parameter rute. Untuk menggunakan rute dengan satu atau beberapa parameter yang berisi titik, aplikasi harus mengonfigurasi rute dengan templat kustom.

Pertimbangkan komponen berikut Example yang dapat menerima parameter rute dari segmen terakhir URL.

Example.razor:

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example/{param?}"

<p>
    Param: @Param
</p>

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

@page "/example"
@page "/example/{param}"

<p>
    Param: @Param
</p>

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

Untuk mengizinkan aplikasi solusi yang dihosting Server untuk merutekanProgram

app.MapFallbackToFile("/example/{param?}", "index.html");

Untuk mengonfigurasi Blazor Server aplikasi untuk merutekan permintaan dengan titik di param parameter rute, tambahkan templat rute halaman fallback dengan parameter opsional dalam Program file:

app.MapFallbackToPage("/example/{param?}", "/_Host");

Untuk informasi lebih lanjut, lihat Perutean di ASP.NET Core.

Untuk mengizinkan aplikasi solusi yang dihosting Server untuk merutekan Blazor WebAssemblyStartup.Configure

Startup.cs:

endpoints.MapFallbackToFile("/example/{param?}", "index.html");

Untuk mengonfigurasi Blazor Server aplikasi untuk merutekan permintaan dengan titik di param parameter rute, tambahkan templat rute halaman fallback dengan parameter opsional di Startup.Configure.

Startup.cs:

endpoints.MapFallbackToPage("/example/{param?}", "/_Host");

Untuk informasi lebih lanjut, lihat Perutean di ASP.NET Core.

Parameter rute catch-all

Parameter rute catch-all, yang mengambil jalur di beberapa batas folder, didukung dalam komponen.

Parameter rute catch-all adalah:

• Dinamai agar sesuai dengan nama segmen rute. Penamaan tidak peka huruf besar/kecil.
• Jenis string . Kerangka kerja tidak menyediakan transmisi otomatis.
• Di akhir URL.

CatchAll.razor:

@page "/catch-all/{*pageRoute}"

<PageTitle>Catch All</PageTitle>

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

@page "/catch-all/{*pageRoute}"

<PageTitle>Catch All</PageTitle>

<h1>Catch All Parameters Example</h1>

<p>Add some URI segments to the route and request the page again.</p>

<p>
    PageRoute: @PageRoute
</p>

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

@page "/catch-all/{*pageRoute}"

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

@page "/catch-all/{*pageRoute}"

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

@page "/catch-all/{*pageRoute}"

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

Untuk URL /catch-all/this/is/a/test dengan templat /catch-all/{*pageRoute}rute , nilai PageRoute diatur ke this/is/a/test.

Garis miring dan segmen jalur yang diambil didekodekan. Untuk templat /catch-all/{*pageRoute}rute , URL /catch-all/this/is/a%2Ftest%2A menghasilkan this/is/a/test*.

@page "/navigate"
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<PageTitle>Navigate</PageTitle>

<h1>Navigate Example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e) => 
        Logger.LogInformation("URL of new location: {Location}", e.Location);

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

@page "/navigate"
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<PageTitle>Navigate</PageTitle>

<h1>Navigate Example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent() => Navigation.NavigateTo("counter");

    protected override void OnInitialized() => 
        Navigation.LocationChanged += HandleLocationChanged;

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e) => 
        Logger.LogInformation("URL of new location: {Location}", e.Location);

    public void Dispose() => Navigation.LocationChanged -= HandleLocationChanged;
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

@page "/navigate"
@using Microsoft.Extensions.Logging 
@implements IDisposable
@inject ILogger<Navigate> Logger
@inject NavigationManager Navigation

<h1>Navigate in component code example</h1>

<button class="btn btn-primary" @onclick="NavigateToCounterComponent">
    Navigate to the Counter component
</button>

@code {
    private void NavigateToCounterComponent()
    {
        Navigation.NavigateTo("counter");
    }

    protected override void OnInitialized()
    {
        Navigation.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
    {
        Logger.LogInformation("URL of new location: {Location}", e.Location);
    }

    public void Dispose()
    {
        Navigation.LocationChanged -= HandleLocationChanged;
    }
}

Navigasi dan penanganan formulir yang disempurnakan

Bagian ini berlaku untuk Blazor Web Apps.

Blazor Web Apps mampu dua jenis perutean untuk navigasi halaman dan permintaan penanganan formulir:

• Navigasi normal (navigasi lintas dokumen): pemuatan ulang halaman penuh dipicu untuk URL permintaan.
• Navigasi yang ditingkatkan (navigasi dokumen yang sama): Blazor mencegat permintaan dan melakukan fetch permintaan sebagai gantinya. Blazor lalu patch konten respons ke dalam DOM halaman. BlazorNavigasi dan penanganan formulir yang disempurnakan menghindari kebutuhan untuk memuat ulang halaman penuh dan mempertahankan lebih banyak status halaman, sehingga halaman dimuat lebih cepat, biasanya tanpa kehilangan posisi gulir pengguna di halaman.

Navigasi yang ditingkatkan tersedia ketika:

• Blazor Web App Skrip (blazor.web.js) digunakan, bukan Blazor Server skrip (blazor.server.js) atau Blazor WebAssembly skrip (blazor.webassembly.js).
• Fitur ini tidak dinonaktifkan secara eksplisit.
• URL tujuan berada dalam ruang URI dasar internal (jalur dasar aplikasi).

Jika perutean sisi server dan navigasi yang ditingkatkan diaktifkan, penangan perubahan lokasi hanya dipanggil untuk navigasi terprogram yang dimulai dari runtime interaktif. Dalam rilis mendatang, jenis navigasi tambahan, seperti mengikuti tautan, juga dapat memanggil penangan perubahan lokasi.

Ketika navigasi yang ditingkatkan terjadi, LocationChanged penanganan aktivitas yang terdaftar di Interactive Server dan runtime WebAssembly biasanya dipanggil. Ada kasus ketika penangan perubahan lokasi mungkin tidak mencegat navigasi yang ditingkatkan. Misalnya, pengguna mungkin beralih ke halaman lain sebelum runtime interaktif tersedia. Oleh karena itu, penting bahwa logika aplikasi tidak mengandalkan pemanggilan lokasi yang mengubah handler, karena tidak ada jaminan handler yang dijalankan.

Saat memanggil NavigateTo:

• Jika forceLoad adalah false, yang merupakan default:
  • Dan navigasi yang ditingkatkan tersedia di URL saat ini, Blazornavigasi yang ditingkatkan diaktifkan.
  • Jika tidak, Blazor lakukan pemuatan ulang halaman penuh untuk URL yang diminta.
• Jika forceLoad adalah true: Blazor melakukan pemuatan ulang halaman penuh untuk URL yang diminta, apakah navigasi yang ditingkatkan tersedia atau tidak.

Anda dapat menyegarkan halaman saat ini dengan memanggil NavigationManager.Refresh(bool forceLoad = false), yang selalu melakukan navigasi yang ditingkatkan, jika tersedia. Jika navigasi yang disempurnakan tidak tersedia, Blazor lakukan pemuatan ulang halaman penuh.

Navigation.Refresh();

Teruskan true ke forceLoad parameter untuk memastikan pemuatan ulang halaman penuh selalu dilakukan, bahkan jika navigasi yang ditingkatkan tersedia:

Navigation.Refresh(true);

Navigasi yang ditingkatkan diaktifkan secara default, tetapi dapat dikontrol secara hierarkis dan berdasarkan per tautan menggunakan data-enhance-nav atribut HTML.

Contoh berikut menonaktifkan navigasi yang ditingkatkan:

<a href="redirect" data-enhance-nav="false">
    GET without enhanced navigation
</a>

<ul data-enhance-nav="false">
    <li>
        <a href="redirect">GET without enhanced navigation</a>
    </li>
    <li>
        <a href="redirect-2">GET without enhanced navigation</a>
    </li>
</ul>

Jika tujuan adalah titik akhir non-Blazor , navigasi yang disempurnakan tidak berlaku, dan JavaScript sisi klien mencoba kembali sebagai pemuatan halaman penuh. Ini memastikan tidak ada kebingungan dengan kerangka kerja tentang halaman eksternal yang seharusnya tidak di-patch ke halaman yang ada.

Untuk mengaktifkan penanganan formulir yang ditingkatkan Enhance , tambahkan parameter ke EditForm formulir atau data-enhance atribut ke formulir HTML (<form>):

<EditForm ... Enhance ...>
    ...
</EditForm>

<form ... data-enhance ...>
    ...
</form>

Penanganan formulir yang disempurnakan tidak hierarkis dan tidak mengalir ke formulir anak:

❌ Tidak didukung: Anda tidak dapat mengatur navigasi yang ditingkatkan pada elemen leluhur formulir untuk mengaktifkan navigasi yang disempurnakan untuk formulir.

<div ... data-enhance ...>
    <form ...>
        <!-- NOT enhanced -->
    </form>
</div>

Posting formulir yang disempurnakan hanya berfungsi dengan Blazor titik akhir. Memposting formulir yang disempurnakan ke non-titikBlazor akhir menghasilkan kesalahan.

Untuk menonaktifkan navigasi yang disempurnakan:

• EditFormUntuk , hapus Enhance parameter dari elemen formulir (atau atur ke false: Enhance="false").
• Untuk HTML <form>, hapus data-enhance atribut dari elemen formulir (atau atur ke false: data-enhance="false").

BlazorNavigasi dan penyerahan formulir yang disempurnakan dapat membatalkan perubahan dinamis pada DOM jika konten yang diperbarui bukan bagian dari penyajian server. Untuk mempertahankan konten elemen, gunakan data-permanent atribut .

Dalam contoh berikut, konten elemen diperbarui <div> secara dinamis oleh skrip saat halaman dimuat:

<div data-permanent>
    ...
</div>

Setelah Blazor dimulai pada klien, Anda dapat menggunakan enhancedload peristiwa untuk mendengarkan pembaruan halaman yang disempurnakan. Hal ini memungkinkan penerapan ulang perubahan pada DOM yang mungkin telah dibatalkan oleh pembaruan halaman yang disempurnakan.

Blazor.addEventListener('enhancedload', () => console.log('Enhanced update!'));

Untuk menonaktifkan navigasi dan penanganan formulir yang disempurnakan secara global, lihat Blazor ASP.NET Core.

Navigasi yang ditingkatkan dengan penyajian sisi server statis (SSR statis) memerlukan perhatian khusus saat memuat JavaScript. Untuk informasi selengkapnya, lihat ASP.NET Core Blazor JavaScript dengan penyajian sisi server statis (SSR statis).

Status riwayat navigasi

menggunakan NavigationManager API Riwayat browser untuk mempertahankan status riwayat navigasi yang terkait dengan setiap perubahan lokasi yang dibuat oleh aplikasi. Mempertahankan status riwayat sangat berguna dalam skenario pengalihan eksternal, seperti ketika mengautentikasi pengguna dengan penyedia identitas eksternal. Untuk informasi selengkapnya, lihat bagian Opsi navigasi.

Opsi navigasi

Teruskan NavigationOptions ke NavigateTo untuk mengontrol perilaku berikut:

• ForceLoad: Melewati perutean sisi klien dan memaksa browser memuat halaman baru dari server, apakah URI ditangani oleh router sisi klien atau tidak. Nilai defaultnya adalah false.
• ReplaceHistoryEntry: Ganti entri saat ini dalam tumpukan riwayat. Jika false, tambahkan entri baru ke tumpukan riwayat. Nilai defaultnya adalah false.
• HistoryEntryState: Mendapatkan atau mengatur status untuk ditambahkan ke entri riwayat.

Navigation.NavigateTo("/path", new NavigationOptions
{
    HistoryEntryState = "Navigation state"
});

Untuk informasi selengkapnya tentang mendapatkan status yang terkait dengan entri riwayat target saat menangani perubahan lokasi, lihat bagian Menangani/mencegah perubahan lokasi.

[SupplyParameterFromQuery] Gunakan atribut untuk menentukan bahwa parameter komponen berasal dari string kueri.

[SupplyParameterFromQuery] Gunakan atribut dengan [Parameter] atribut untuk menentukan bahwa parameter komponen komponen yang dapat dirutekan berasal dari string kueri.

Parameter komponen yang disediakan dari string kueri mendukung jenis berikut:

• bool, , DateTime, decimaldouble, float, Guid, int, , long, string.
• Varian nullable dari jenis sebelumnya.
• Array dari jenis sebelumnya, baik yang dapat diubah ke null atau tidak dapat diubah ke null.

Pemformatan invarian budaya yang benar diterapkan untuk jenis yang diberikan (CultureInfo.InvariantCulture).

[SupplyParameterFromQuery] Tentukan properti atribut Name untuk menggunakan nama parameter kueri yang berbeda dari nama parameter komponen. Dalam contoh berikut, nama C# dari parameter komponen adalah {COMPONENT PARAMETER NAME}. Nama parameter kueri yang berbeda ditentukan untuk {QUERY PARAMETER NAME} tempat penampung:

Tidak seperti properti parameter komponen ([Parameter]), [SupplyParameterFromQuery] properti dapat ditandai private selain public.

[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
private string? {COMPONENT PARAMETER NAME} { get; set; }

Sama seperti properti parameter komponen ([Parameter]), [SupplyParameterFromQuery] properti selalu public properti di .NET 6/7. Di .NET 8 atau yang lebih baru, [SupplyParameterFromQuery] properti dapat ditandai public atau private.

[Parameter]
[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")]
public string? {COMPONENT PARAMETER NAME} { get; set; }

Dalam contoh berikut dengan URL :/search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman

• Properti Filter menyelesaikan ke scifi stars.
• Properti Page menyelesaikan ke 3.
• Array Stars diisi dari parameter kueri bernama star (Name = "star") dan diselesaikan ke LeVar Burton dan Gary Oldman.

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

@code {
    [SupplyParameterFromQuery]
    private string? Filter { get; set; }

    [SupplyParameterFromQuery]
    private int? Page { get; set; }

    [SupplyParameterFromQuery(Name = "star")]
    private string[]? Stars { get; set; }
}

Search.razor:

@page "/search"

<h1>Search Example</h1>

<p>Filter: @Filter</p>

<p>Page: @Page</p>

@if (Stars is not null)
{
    <p>Stars:</p>

    <ul>
        @foreach (var name in Stars)
        {
            <li>@name</li>
        }
    </ul>
}

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

    [Parameter]
    [SupplyParameterFromQuery]
    public int? Page { get; set; }

    [Parameter]
    [SupplyParameterFromQuery(Name = "star")]
    public string[]? Stars { get; set; }
}

Gunakan GetUriWithQueryParameter untuk menambahkan, mengubah, atau menghapus satu atau beberapa parameter kueri pada URL saat ini:

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameter("{NAME}", {VALUE})

Untuk contoh sebelumnya:

• Tempat {NAME} penampung menentukan nama parameter kueri. Tempat {VALUE} penampung menentukan nilai sebagai jenis yang didukung. Jenis yang didukung dicantumkan nanti di bagian ini.
• String dikembalikan sama dengan URL saat ini dengan satu parameter:
  • Ditambahkan jika nama parameter kueri tidak ada di URL saat ini.
  • Diperbarui ke nilai yang disediakan jika parameter kueri ada di URL saat ini.
  • Dihapus jika jenis nilai yang disediakan dapat diubah ke null dan nilainya adalah null.
• Pemformatan invarian budaya yang benar diterapkan untuk jenis yang diberikan (CultureInfo.InvariantCulture).
• Nama dan nilai parameter kueri dikodekan URL.
• Semua nilai dengan nama parameter kueri yang cocok diganti jika ada beberapa instans jenis.

Panggil GetUriWithQueryParameters untuk membuat URI yang dibangun dari Uri dengan beberapa parameter ditambahkan, diperbarui, atau dihapus. Untuk setiap nilai, kerangka kerja menggunakan value?.GetType() untuk menentukan jenis runtime untuk setiap parameter kueri dan memilih pemformatan invarian budaya yang benar. Kerangka kerja melemparkan kesalahan untuk jenis yang tidak didukung.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters({PARAMETERS})

Tempat {PARAMETERS} penampung adalah IReadOnlyDictionary<string, object>.

Teruskan string URI ke untuk GetUriWithQueryParameters menghasilkan URI baru dari URI yang disediakan dengan beberapa parameter ditambahkan, diperbarui, atau dihapus. Untuk setiap nilai, kerangka kerja menggunakan value?.GetType() untuk menentukan jenis runtime untuk setiap parameter kueri dan memilih pemformatan invarian budaya yang benar. Kerangka kerja melemparkan kesalahan untuk jenis yang tidak didukung. Jenis yang didukung dicantumkan nanti di bagian ini.

@inject NavigationManager Navigation

...

Navigation.GetUriWithQueryParameters("{URI}", {PARAMETERS})

• Tempat {URI} penampung adalah URI dengan atau tanpa string kueri.
• Tempat {PARAMETERS} penampung adalah IReadOnlyDictionary<string, object>.

Jenis yang didukung identik dengan jenis yang didukung untuk batasan rute:

• bool
• DateTime
• decimal
• double
• float
• Guid
• int
• long
• string

Jenis yang didukung meliputi:

• Varian nullable dari jenis sebelumnya.
• Array dari jenis sebelumnya, baik yang dapat diubah ke null atau tidak dapat diubah ke null.

Mengganti nilai parameter kueri saat parameter ada

Navigation.GetUriWithQueryParameter("full name", "Morena Baccarin")

Menambahkan parameter dan nilai kueri saat parameter tidak ada

Navigation.GetUriWithQueryParameter("name", "Morena Baccarin")

Menghapus parameter kueri saat nilai parameter adalah null

Navigation.GetUriWithQueryParameter("full name", (string)null)

Menambahkan, memperbarui, dan menghapus parameter kueri

Dalam contoh berikut:

• name dihapus, jika ada.
• age ditambahkan dengan nilai 25 (int), jika tidak ada. Jika ada, age diperbarui ke nilai 25.
• eye color ditambahkan atau diperbarui ke nilai green.

Navigation.GetUriWithQueryParameters(
    new Dictionary<string, object?>
    {
        ["name"] = null,
        ["age"] = (int?)25,
        ["eye color"] = "green"
    })

Dukungan untuk nilai yang dapat dijumlahkan

Dalam contoh berikut:

• full name ditambahkan atau diperbarui ke Morena Baccarin, satu nilai.
• pingparameter ditambahkan atau diganti dengan 35, , 1687 dan 240.

Navigation.GetUriWithQueryParameters(
    new Dictionary<string, object?>
    {
        ["full name"] = "Morena Baccarin",
        ["ping"] = new int?[] { 35, 16, null, 87, 240 }
    })

Menavigasi dengan string kueri yang ditambahkan atau dimodifikasi

Untuk menavigasi dengan string kueri yang ditambahkan atau dimodifikasi, teruskan URL yang dihasilkan ke NavigateTo.

Contoh panggilan berikut:

• GetUriWithQueryParameter untuk menambahkan atau mengganti name parameter kueri menggunakan nilai Morena Baccarin.
• NavigateTo Panggilan untuk memicu navigasi ke URL baru.

Navigation.NavigateTo(
    Navigation.GetUriWithQueryParameter("name", "Morena Baccarin"));

String kueri permintaan diperoleh dari NavigationManager.Uri properti :

@inject NavigationManager Navigation

...

var query = new Uri(Navigation.Uri).Query;

Untuk mengurai parameter string kueri, salah satu pendekatannya adalah menggunakan URLSearchParams interop JSJavaScript ():

export createQueryString = (string queryString) => new URLSearchParams(queryString);

Untuk informasi selengkapnya tentang isolasi JavaScript dengan modul JavaScript, lihat Memanggil fungsi JavaScript dari metode .NET di ASP.NET Core Blazor.

Perutean hash ke elemen bernama

Navigasikan ke elemen bernama menggunakan pendekatan berikut dengan referensi hash (#) ke elemen . Rute ke elemen dalam komponen dan rute ke elemen dalam komponen eksternal menggunakan jalur root-relative. Garis miring ke depan (/) bersifat opsional.

Contoh untuk setiap pendekatan berikut menunjukkan navigasi ke elemen dengan salah satu id dari targetElement dalam Counter komponen:

• Elemen jangkar (<a>) dengan href:

  <a href="/counter#targetElement">
  

• NavLink komponen dengan href:

  <NavLink href="/counter#targetElement">
  

• NavigationManager.NavigateTo meneruskan URL relatif:

  Navigation.NavigateTo("/counter#targetElement");
  

Contoh berikut menunjukkan perutean yang di-hash ke judul bernama H2 dalam komponen dan komponen eksternal.

Home Di komponen (Home.razor) dan Counter (Counter.razor), letakkan markup berikut di bagian bawah markup komponen yang ada untuk berfungsi sebagai target navigasi. menciptakan <div> ruang vertikal buatan untuk menunjukkan perilaku pengguliran browser:

<div class="border border-info rounded bg-info" style="height:500px"></div>

<h2 id="targetElement">Target H2 heading</h2>
<p>Content!</p>

Tambahkan komponen berikut HashedRouting ke aplikasi.

HashedRouting.razor:

@page "/hashed-routing"
@inject NavigationManager Navigation

<PageTitle>Hashed routing</PageTitle>

<h1>Hashed routing to named elements</h1>

<ul>
    <li>
        <a href="/hashed-routing#targetElement">
            Anchor in this component
        </a>
    </li>
    <li>
        <a href="/#targetElement">
            Anchor to the <code>Home</code> component
        </a>
    </li>
    <li>
        <a href="/counter#targetElement">
            Anchor to the <code>Counter</code> component
        </a>
    </li>
    <li>
        <NavLink href="/hashed-routing#targetElement">
            Use a `NavLink` component in this component
        </NavLink>
    </li>
    <li>
        <button @onclick="NavigateToElement">
            Navigate with <code>NavigationManager</code> to the 
            <code>Counter</code> component
        </button>
    </li>
</ul>

<div class="border border-info rounded bg-info" style="height:500px"></div>

<h2 id="targetElement">Target H2 heading</h2>
<p>Content!</p>

@code {
    private void NavigateToElement()
    {
        Navigation.NavigateTo("/counter#targetElement");
    }
}

Interaksi pengguna dengan <Navigating> konten

Jika ada penundaan yang signifikan selama navigasi, seperti saat rakitan pemuatan malas di Blazor WebAssembly aplikasi atau untuk koneksi jaringan lambat ke Blazor aplikasi sisi server, Router komponen dapat menunjukkan kepada pengguna bahwa transisi halaman sedang terjadi.

Di bagian atas komponen yang menentukan Router komponen, tambahkan direktif @using untuk Microsoft.AspNetCore.Components.Routing namespace:

@using Microsoft.AspNetCore.Components.Routing

Berikan konten ke Navigating parameter untuk ditampilkan selama peristiwa transisi halaman.

Dalam konten elemen router (<Router>...</Router>):

<Navigating>
    <p>Loading the requested page&hellip;</p>
</Navigating>

Untuk contoh yang menggunakan properti , lihat rakitan beban malas Navigating di ASP.NET Core Blazor WebAssembly.

Menangani peristiwa navigasi asinkron dengan OnNavigateAsync

Komponen Router mendukung OnNavigateAsync fitur. Handler OnNavigateAsync dipanggil saat pengguna:

• Mengunjungi rute untuk pertama kalinya dengan menavigasi ke rute tersebut langsung di browser mereka.
• Menavigasi ke rute baru menggunakan tautan atau NavigationManager.NavigateTo pemanggilan.

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

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

@code {
    private async Task OnNavigateAsync(NavigationContext args)
    {
        ...
    }
}

Untuk contoh yang menggunakan , lihat rakitan beban malas OnNavigateAsyncdi ASP.NET Core Blazor WebAssembly.

Saat melakukan pra-penyajian di server, OnNavigateAsync dijalankan dua kali:

• Setelah ketika komponen titik akhir yang diminta awalnya dirender secara statis.
• Untuk kedua kalinya ketika browser merender komponen titik akhir.

Untuk mencegah kode pengembang masuk OnNavigateAsync dari eksekusi dua kali, Routes komponen dapat menyimpan NavigationContext untuk digunakan dalam OnAfterRender{Async} metode siklus hidup, di mana firstRender dapat diperiksa. Untuk informasi selengkapnya, lihat Pra-penyajian dengan interop JavaScript.

Untuk mencegah kode pengembang dalam OnNavigateAsync mengeksekusi dua kali, App komponen dapat menyimpan NavigationContext untuk digunakan di OnAfterRender{Async}, di mana firstRender dapat diperiksa. Untuk informasi selengkapnya, lihat Pra-penyajian dengan interop JavaScript.

Menangani pembatalan di OnNavigateAsync

Objek NavigationContext yang OnNavigateAsync diteruskan ke panggilan balik berisi CancellationToken yang diatur saat peristiwa navigasi baru terjadi. Panggilan OnNavigateAsync balik harus dilemparkan ketika token pembatalan ini diatur untuk menghindari terus menjalankan OnNavigateAsync panggilan balik pada navigasi yang ketinggalan jaman.

Jika pengguna menavigasi ke titik akhir tetapi segera menavigasi ke titik akhir baru, aplikasi tidak boleh terus menjalankan OnNavigateAsync panggilan balik untuk titik akhir pertama.

Dalam contoh berikut:

• Token pembatalan diteruskan dalam panggilan ke PostAsJsonAsync, yang dapat membatalkan POST jika pengguna menavigasi jauh dari /about titik akhir.
• Token pembatalan diatur selama operasi prefetch produk jika pengguna menavigasi jauh dari /store titik akhir.

@inject HttpClient Http
@inject ProductCatalog Products

<Router AppAssembly="typeof(App).Assembly" 
    OnNavigateAsync="OnNavigateAsync">
    ...
</Router>

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = new[] { 345, 789, 135, 689 };

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

@inject HttpClient Http
@inject ProductCatalog Products

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

@code {
    private async Task OnNavigateAsync(NavigationContext context)
    {
        if (context.Path == "/about") 
        {
            var stats = new Stats { Page = "/about" };
            await Http.PostAsJsonAsync("api/visited", stats, 
                context.CancellationToken);
        }
        else if (context.Path == "/store")
        {
            var productIds = new[] { 345, 789, 135, 689 };

            foreach (var productId in productIds) 
            {
                context.CancellationToken.ThrowIfCancellationRequested();
                Products.Prefetch(productId);
            }
        }
    }
}

Menangani/mencegah perubahan lokasi

RegisterLocationChangingHandler mendaftarkan handler untuk memproses peristiwa navigasi masuk. Konteks handler yang disediakan dengan LocationChangingContext menyertakan properti berikut:

• TargetLocation: Mendapatkan lokasi target.
• HistoryEntryState: Mendapatkan status yang terkait dengan entri riwayat target.
• IsNavigationIntercepted: Mendapatkan apakah navigasi dicegat dari tautan.
• CancellationToken: Mendapatkan CancellationToken untuk menentukan apakah navigasi dibatalkan, misalnya, untuk menentukan apakah pengguna memicu navigasi yang berbeda.
• PreventNavigation: Dipanggil untuk mencegah navigasi berlanjut.

Komponen dapat mendaftarkan beberapa penangan perubahan lokasi dalam OnAfterRender{Async} metode siklus hidup. Navigasi memanggil semua penangan perubahan lokasi yang terdaftar di seluruh aplikasi (di beberapa komponen), dan navigasi internal apa pun menjalankan semuanya secara paralel. Selain NavigateTo handler dipanggil:

• Saat memilih tautan internal, yang merupakan tautan yang menunjuk ke URL di bawah jalur dasar aplikasi.
• Saat menavigasi menggunakan tombol teruskan dan kembali di browser.

Handler hanya dijalankan untuk navigasi internal dalam aplikasi. Jika pengguna memilih tautan yang menavigasi ke situs lain atau mengubah bilah alamat ke situs lain secara manual, penangan perubahan lokasi tidak dijalankan.

Terapkan IDisposable dan buang handler terdaftar untuk membatalkan pendaftarannya. Untuk informasi lebih lanjut, lihat siklus hidup komponen Razor ASP.NET Core.

Dalam contoh berikut, penangan perubahan lokasi didaftarkan untuk peristiwa navigasi.

NavHandler.razor:

@page "/nav-handler"
@implements IDisposable
@inject NavigationManager Navigation

<p>
    <button @onclick="@(() => Navigation.NavigateTo("/"))">
        Home (Allowed)
    </button>
    <button @onclick="@(() => Navigation.NavigateTo("/counter"))">
        Counter (Prevented)
    </button>
</p>

@code {
    private IDisposable? registration;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            registration = 
                Navigation.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        if (context.TargetLocation == "/counter")
        {
            context.PreventNavigation();
        }

        return ValueTask.CompletedTask;
    }

    public void Dispose() => registration?.Dispose();
}

Karena navigasi internal dapat dibatalkan secara asinkron, beberapa panggilan yang tumpang tindih ke handler terdaftar dapat terjadi. Misalnya, beberapa panggilan handler dapat terjadi ketika pengguna dengan cepat memilih tombol kembali pada halaman atau memilih beberapa tautan sebelum navigasi dijalankan. Berikut ini adalah ringkasan logika navigasi asinkron:

• Jika ada penangan yang mengubah lokasi terdaftar, semua navigasi awalnya dikembalikan, lalu diputar ulang jika navigasi tidak dibatalkan.
• Jika permintaan navigasi yang tumpang tindih dibuat, permintaan terbaru selalu membatalkan permintaan sebelumnya, yang berarti hal berikut:
  • Aplikasi ini dapat memperlakukan beberapa pilihan tombol kembali dan teruskan sebagai satu pilihan.
  • Jika pengguna memilih beberapa tautan sebelum navigasi selesai, tautan terakhir yang dipilih menentukan navigasi.

Untuk informasi selengkapnya tentang meneruskan NavigationOptions ke NavigateTo untuk mengontrol entri dan status tumpukan riwayat navigasi, lihat bagian Opsi navigasi.

Untuk contoh kode tambahan, lihat NavigationManagerComponent di BasicTestApp (dotnet/aspnetcore sumber referensi).

Komponen NavigationLock mencegat peristiwa navigasi selama dirender, secara efektif "mengunci" navigasi tertentu sampai keputusan dibuat untuk melanjutkan atau membatalkan. Gunakan NavigationLock saat intersepsi navigasi dapat dilingkupkan ke masa pakai komponen.

NavigationLock Parameter:

• ConfirmExternalNavigation mengatur dialog browser untuk meminta pengguna mengonfirmasi atau membatalkan navigasi eksternal. Nilai defaultnya adalah false. Menampilkan dialog konfirmasi memerlukan interaksi pengguna awal dengan halaman sebelum memicu navigasi eksternal dengan URL di bilah alamat browser. Untuk informasi selengkapnya tentang persyaratan interaksi, lihat Jendela: beforeunload peristiwa (dokumentasi MDN).
• OnBeforeInternalNavigation mengatur panggilan balik untuk peristiwa navigasi internal.

Dalam komponen NavLock berikut:

• Upaya untuk mengikuti tautan ke situs web Microsoft harus dikonfirmasi oleh pengguna sebelum navigasi https://www.microsoft.com berhasil.
• PreventNavigationdipanggil untuk mencegah navigasi terjadi jika pengguna menolak untuk mengonfirmasi navigasi melalui panggilan interop JavaScript (JS) yang menelurkanconfirm

NavLock.razor:

@page "/nav-lock"
@inject IJSRuntime JSRuntime
@inject NavigationManager Navigation

<NavigationLock ConfirmExternalNavigation="true" 
    OnBeforeInternalNavigation="OnBeforeInternalNavigation" />

<p>
    <button @onclick="Navigate">Navigate</button>
</p>

<p>
    <a href="https://www.microsoft.com">Microsoft homepage</a>
</p>

@code {
    private void Navigate()
    {
        Navigation.NavigateTo("/");
    }

    private async Task OnBeforeInternalNavigation(LocationChangingContext context)
    {
        var isConfirmed = await JSRuntime.InvokeAsync<bool>("confirm", 
            "Are you sure you want to navigate to the root page?");

        if (!isConfirmed)
        {
            context.PreventNavigation();
        }
    }
}

Untuk contoh kode tambahan, lihat ConfigurableNavigationLock komponen di BasicTestApp (dotnet/aspnetcore sumber referensi).

Untuk contoh kode sebelumnya dalam aplikasi sampel yang dapat Anda jalankan secara lokal, dapatkan Blazor WebAssembly sampel atau .

Bagian ini berlaku untuk Blazor Web Apps yang beroperasi melalui sirkuit.

Bagian ini berlaku untuk Blazor Server aplikasi.

Blazor Web App diintegrasikan ke dalam Perutean Titik Akhir Inti ASP.NET. Aplikasi ASP.NET Core dikonfigurasi untuk menerima koneksi masuk untuk komponen interaktif dengan MapRazorComponents dalam Program file. Komponen akar default (komponen pertama yang dimuat) adalah App komponen (App.razor):

app.MapRazorComponents<App>();

Blazor Server diintegrasikan ke dalam Perutean Titik Akhir Inti ASP.NET. Aplikasi ASP.NET Core dikonfigurasi untuk menerima koneksi masuk untuk komponen interaktif dengan MapBlazorHub dalam Program file:

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

Blazor Server diintegrasikan ke dalam Perutean Titik Akhir Inti ASP.NET. Aplikasi ASP.NET Core dikonfigurasi untuk menerima koneksi masuk untuk komponen interaktif dengan MapBlazorHub di Startup.Configure.

Konfigurasi umumnya adalah merutekan semua permintaan ke Razor halaman, yang bertindak sebagai host untuk bagian Blazor Server sisi server aplikasi. Menurut konvensi, halaman host biasanya dinamai _Host.cshtmlPages di folder aplikasi.

Rute yang ditentukan dalam file host disebut rute fallback karena beroperasi dengan prioritas rendah dalam pencocokan rute. Rute fallback digunakan saat rute lain tidak cocok. Ini memungkinkan aplikasi untuk menggunakan pengontrol dan halaman lain tanpa mengganggu perutean komponen di Blazor Server aplikasi.

Untuk informasi tentang mengonfigurasi MapFallbackToPage hosting server URL non-root, lihat Host dan sebarkan ASP.NET Core Blazor.