User Example

User Id: @Id

) always use the invariant culture. These constraints assume that the URL is non-localizable. :::moniker range=">= aspnetcore-6.0" Route constraints also work with [optional parameters](#route-parameters). In the following example, `Id` is required, but `Option` is an optional boolean route parameter. `User.razor`: ```razor @page "/user/{id:int}/{option:bool?}"

Id: @Id

Option: @Option

@code { [Parameter] public int Id { get; set; } [Parameter] public bool Option { get; set; } } ``` :::moniker-end ## Avoid file capture in a route parameter The following route template inadvertently captures static asset paths in its optional route parameter (`Optional`). For example, the app's stylesheet (`.styles.css`) is captured, which breaks the app's styles: ```razor @page "/{optional?}" ... @code { [Parameter] public string? Optional { get; set; } } ``` To restrict a route parameter to capturing non-file paths, use the [`:nonfile` constraint](#route-constraints) in the route template: ```razor @page "/{optional:nonfile?}" ``` :::moniker range="< aspnetcore-8.0" ## Routing with URLs that contain dots A ***server-side*** default route template assumes that if the last segment of a request URL contains a dot (`.`) that a file is requested. For example, the relative URL `/example/some.thing` is interpreted by the router as a request for a file named `some.thing`. Without additional configuration, an app returns a *404 - Not Found* response if `some.thing` was meant to route to a component with an [`@page`](xref:mvc/views/razor#page) directive and `some.thing` is a route parameter value. To use a route with one or more parameters that contain a dot, the app must configure the route with a custom template. Consider the following `Example` component that can receive a route parameter from the last segment of the URL. `Example.razor`: :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_Server/Pages/routing/Example.razor"::: :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" :::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_Server/Pages/routing/Example.razor"::: :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" :::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_Server/Pages/routing/Example.razor"::: :::moniker-end :::moniker range="< aspnetcore-5.0" :::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_Server/Pages/routing/Example.razor"::: :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" To permit the **:::no-loc text="Server":::** app of a hosted Blazor WebAssembly [solution](xref:blazor/tooling#visual-studio-solution-file-sln) to route the request with a dot in the `param` route parameter, add a fallback file route template with the optional parameter in the `Program` file: ```csharp app.MapFallbackToFile("/example/{param?}", "index.html"); ``` To configure a Blazor Server app to route the request with a dot in the `param` route parameter, add a fallback page route template with the optional parameter in the `Program` file: ```csharp app.MapFallbackToPage("/example/{param?}", "/_Host"); ``` For more information, see . :::moniker-end :::moniker range="< aspnetcore-6.0" To permit the **:::no-loc text="Server":::** app of a hosted Blazor WebAssembly [solution](xref:blazor/tooling#visual-studio-solution-file-sln) to route the request with a dot in the `param` route parameter, add a fallback file route template with the optional parameter in `Startup.Configure`. `Startup.cs`: ```csharp endpoints.MapFallbackToFile("/example/{param?}", "index.html"); ``` To configure a Blazor Server app to route the request with a dot in the `param` route parameter, add a fallback page route template with the optional parameter in `Startup.Configure`. `Startup.cs`: ```csharp endpoints.MapFallbackToPage("/example/{param?}", "/_Host"); ``` For more information, see . :::moniker-end :::moniker range=">= aspnetcore-5.0" ## Catch-all route parameters Catch-all route parameters, which capture paths across multiple folder boundaries, are supported in components. Catch-all route parameters are: * Named to match the route segment name. Naming isn't case-sensitive. * A `string` type. The framework doesn't provide automatic casting. * At the end of the URL. `CatchAll.razor`: :::moniker-end :::moniker range=">= aspnetcore-9.0" :::code language="razor" source="~/../blazor-samples/9.0/BlazorSample_BlazorWebApp/Components/Pages/Catchall.razor"::: :::moniker-end :::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0" :::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Catchall.razor"::: :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/CatchAll.razor"::: :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" :::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/routing/CatchAll.razor"::: :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" :::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/routing/CatchAll.razor"::: :::moniker-end :::moniker range=">= aspnetcore-5.0" For the URL `/catch-all/this/is/a/test` with a route template of `/catch-all/{*pageRoute}`, the value of `PageRoute` is set to `this/is/a/test`. Slashes and segments of the captured path are decoded. For a route template of `/catch-all/{*pageRoute}`, the URL `/catch-all/this/is/a%2Ftest%2A` yields `this/is/a/test*`. :::moniker-end ## URI and navigation state helpers Use to manage URIs and navigation in C# code. provides the event and methods shown in the following table. :::moniker range=">= aspnetcore-8.0" Member | Description --- | --- | Gets the current absolute URI. | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, corresponds to the `href` attribute on the document's `` element ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). | Navigates to the specified URI. If `forceLoad` is `false`:

And enhanced navigation is available at the current URL, Blazor's enhanced navigation is activated.
Otherwise, Blazor performs a full-page reload for the requested URL.

If `forceLoad` is `true`:

Client-side routing is bypassed.
The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side interactive router.

For more information, see the [Enhanced navigation and form handling](#enhanced-navigation-and-form-handling) section.

If `replace` is `true`, the current URI in the browser history is replaced instead of pushing a new URI onto the history stack.

| An event that fires when the navigation location has changed. For more information, see the [Location changes](#location-changes) section. | Converts a relative URI into an absolute URI. | Based on the app's base URI, converts an absolute URI into a URI relative to the base URI prefix. For an example, see the [Produce a URI relative to the base URI prefix](#produce-a-uri-relative-to-the-base-uri-prefix) section. [`RegisterLocationChangingHandler`](#handleprevent-location-changes) | Registers a handler to process incoming navigation events. Calling always invokes the handler. | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#query-strings) section. :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" Member | Description --- | --- | Gets the current absolute URI. | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, corresponds to the `href` attribute on the document's `` element ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). | Navigates to the specified URI. If `forceLoad` is `true`:

Client-side routing is bypassed.
The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.

If `replace` is `true`, the current URI in the browser history is replaced instead of pushing a new URI onto the history stack. | An event that fires when the navigation location has changed. For more information, see the [Location changes](#location-changes) section. | Converts a relative URI into an absolute URI. | Based on the app's base URI, converts an absolute URI into a URI relative to the base URI prefix. For an example, see the [Produce a URI relative to the base URI prefix](#produce-a-uri-relative-to-the-base-uri-prefix) section. [`RegisterLocationChangingHandler`](#handleprevent-location-changes) | Registers a handler to process incoming navigation events. Calling always invokes the handler. | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#query-strings) section. :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" Member | Description --- | --- | Gets the current absolute URI. | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, corresponds to the `href` attribute on the document's `` element ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). | Navigates to the specified URI. If `forceLoad` is `true`:

Client-side routing is bypassed.
The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.

If `replace` is `true`, the current URI in the browser history is replaced instead of pushing a new URI onto the history stack. | An event that fires when the navigation location has changed. For more information, see the [Location changes](#location-changes) section. | Converts a relative URI into an absolute URI. | Based on the app's base URI, converts an absolute URI into a URI relative to the base URI prefix. For an example, see the [Produce a URI relative to the base URI prefix](#produce-a-uri-relative-to-the-base-uri-prefix) section. | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#query-strings) section. :::moniker-end :::moniker range="< aspnetcore-6.0" Member | Description --- | --- | Gets the current absolute URI. | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, corresponds to the `href` attribute on the document's `` element ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). | Navigates to the specified URI. If `forceLoad` is `true`:

Client-side routing is bypassed.
The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.

| An event that fires when the navigation location has changed. | Converts a relative URI into an absolute URI. | Based on the app's base URI, converts an absolute URI into a URI relative to the base URI prefix. For an example, see the [Produce a URI relative to the base URI prefix](#produce-a-uri-relative-to-the-base-uri-prefix) section. :::moniker-end ## Location changes For the event, provides the following information about navigation events: * : The URL of the new location. * : If `true`, Blazor intercepted the navigation from the browser. If `false`, caused the navigation to occur. The following component: * Navigates to the app's `Counter` component (`Counter.razor`) when the button is selected using . * Handles the location changed event by subscribing to . * The `HandleLocationChanged` method is unhooked when `Dispose` is called by the framework. Unhooking the method permits garbage collection of the component. * The logger implementation logs the following information when the button is selected: > :::no-loc text="BlazorSample.Pages.Navigate: Information: URL of new location: https://localhost:{PORT}/counter"::: `Navigate.razor`: :::moniker range=">= aspnetcore-9.0" :::code language="razor" source="~/../blazor-samples/9.0/BlazorSample_BlazorWebApp/Components/Pages/Navigate.razor"::: :::moniker-end :::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0" :::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/Navigate.razor"::: :::moniker-end :::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0" :::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/routing/Navigate.razor"::: :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0" :::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/routing/Navigate.razor"::: :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" :::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/routing/Navigate.razor"::: :::moniker-end :::moniker range="< aspnetcore-5.0" :::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/routing/Navigate.razor"::: :::moniker-end For more information on component disposal, see . :::moniker range=">= aspnetcore-8.0" ## Enhanced navigation and form handling *This section applies to Blazor Web Apps.* Blazor Web Apps are capable of two types of routing for page navigation and form handling requests: * Normal navigation (cross-document navigation): a full-page reload is triggered for the request URL. * Enhanced navigation (same-document navigation): Blazor intercepts the request and performs a `fetch` request instead. Blazor then patches the response content into the page's DOM. Blazor's enhanced navigation and form handling avoid the need for a full-page reload and preserves more of the page state, so pages load faster, usually without losing the user's scroll position on the page. Enhanced navigation is available when: * The Blazor Web App script (`blazor.web.js`) is used, not the Blazor Server script (`blazor.server.js`) or Blazor WebAssembly script (`blazor.webassembly.js`). * The feature isn't [explicitly disabled](xref:blazor/fundamentals/startup#disable-enhanced-navigation-and-form-handling). * The destination URL is within the internal base URI space (the app's base path). If server-side routing and enhanced navigation are enabled, [location changing handlers](#location-changes) are only invoked for programmatic navigation initiated from an interactive runtime. In future releases, additional types of navigation, such as following a link, may also invoke location changing handlers. When an enhanced navigation occurs, [`LocationChanged` event handlers](#location-changes) registered with Interactive Server and WebAssembly runtimes are typically invoked. There are cases when location changing handlers might not intercept an enhanced navigation. For example, the user might switch to another page before an interactive runtime becomes available. Therefore, it's important that app logic not rely on invoking a location changing handler, as there's no guarantee of the handler executing. When calling : * If `forceLoad` is `false`, which is the default: * And enhanced navigation is available at the current URL, Blazor's enhanced navigation is activated. * Otherwise, Blazor performs a full-page reload for the requested URL. * If `forceLoad` is `true`: Blazor performs a full-page reload for the requested URL, whether enhanced navigation is available or not. You can refresh the current page by calling `NavigationManager.Refresh(bool forceLoad = false)`, which always performs an enhanced navigation, if available. If enhanced navigation isn't available, Blazor performs a full-page reload. ```csharp Navigation.Refresh(); ``` Pass `true` to the `forceLoad` parameter to ensure a full-page reload is always performed, even if enhanced navigation is available: ```csharp Navigation.Refresh(true); ``` Enhanced navigation is enabled by default, but it can be controlled hierarchically and on a per-link basis using the `data-enhance-nav` HTML attribute. The following examples disable enhanced navigation: ```html GET without enhanced navigation ``` ```razor

``` If the destination is a non-Blazor endpoint, enhanced navigation doesn't apply, and the client-side JavaScript retries as a full page load. This ensures no confusion to the framework about external pages that shouldn't be patched into an existing page. To enable enhanced form handling, add the parameter to forms or the `data-enhance` attribute to HTML forms (` ``` Enhanced form handling isn't hierarchical and doesn't flow to child forms: You can't set enhanced navigation on a form's ancestor element to enable enhanced navigation for the form. ```html

``` Enhanced form posts only work with Blazor endpoints. Posting an enhanced form to non-Blazor endpoint results in an error. To disable enhanced navigation: * For an , remove the parameter from the form element (or set it to `false`: `Enhance="false"`). * For an HTML `

`, remove the `data-enhance` attribute from form element (or set it to `false`: `data-enhance="false"`). Blazor's enhanced navigation and form handing may undo dynamic changes to the DOM if the updated content isn't part of the server rendering. To preserve the content of an element, use the `data-permanent` attribute. In the following example, the content of the `

` element is updated dynamically by a script when the page loads: ```html

...

``` Once Blazor has started on the client, you can use the `enhancedload` event to listen for enhanced page updates. This allows for re-applying changes to the DOM that may have been undone by an enhanced page update. ```javascript Blazor.addEventListener('enhancedload', () => console.log('Enhanced update!')); ``` To disable enhanced navigation and form handling globally, see . Enhanced navigation with [static server-side rendering (static SSR)](xref:blazor/components/render-modes#static-server-side-rendering-static-ssr) requires special attention when loading JavaScript. For more information, see . :::moniker-end ## Produce a URI relative to the base URI prefix Based on the app's base URI, converts an absolute URI into a URI relative to the base URI prefix. Consider the following example: ```csharp try { baseRelativePath = Navigation.ToBaseRelativePath(inputURI); } catch (ArgumentException ex) { ... } ``` If the base URI of the app is `https://localhost:8000`, the following results are obtained: * Passing `https://localhost:8000/segment` in `inputURI` results in a `baseRelativePath` of `segment`. * Passing `https://localhost:8000/segment1/segment2` in `inputURI` results in a `baseRelativePath` of `segment1/segment2`. If the base URI of the app doesn't match the base URI of `inputURI`, an is thrown. Passing `https://localhost:8001/segment` in `inputURI` results in the following exception: > :::no-loc text="System.ArgumentException: 'The URI 'https://localhost:8001/segment' is not contained by the base URI 'https://localhost:8000/'.'"::: :::moniker range=">= aspnetcore-7.0" ## Navigation history state The uses the browser's [History API](https://developer.mozilla.org/docs/Web/API/History_API) to maintain navigation history state associated with each location change made by the app. Maintaining history state is particularly useful in external redirect scenarios, such as when [authenticating users with external identity providers](xref:blazor/security/webassembly/index#customize-authorization). For more information, see the [Navigation options](#navigation-options) section. ## Navigation options Pass to to control the following behaviors: * : Bypass client-side routing and force the browser to load the new page from the server, whether or not the URI is handled by the client-side router. The default value is `false`. * : Replace the current entry in the history stack. If `false`, append the new entry to the history stack. The default value is `false`. * : Gets or sets the state to append to the history entry. ```csharp Navigation.NavigateTo("/path", new NavigationOptions { HistoryEntryState = "Navigation state" }); ``` For more information on obtaining the state associated with the target history entry while handling location changes, see the [Handle/prevent location changes](#handleprevent-location-changes) section. :::moniker-end ## Query strings :::moniker range=">= aspnetcore-8.0" Use the [`[SupplyParameterFromQuery]` attribute](xref:Microsoft.AspNetCore.Components.SupplyParameterFromQueryAttribute) to specify that a component parameter comes from the query string. :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" Use the [`[SupplyParameterFromQuery]` attribute](xref:Microsoft.AspNetCore.Components.SupplyParameterFromQueryAttribute) with the [`[Parameter]` attribute](xref:Microsoft.AspNetCore.Components.ParameterAttribute) to specify that a component parameter of a *routable* component comes from the query string. > [!NOTE] > Component parameters can only receive query parameter values in routable components with an [`@page`](xref:mvc/views/razor#page) directive. > > Only routable components directly receive query parameters in order to avoid subverting top-down information flow and to make parameter processing order clear, both by the framework and by the app. This design avoids subtle bugs in app code that was written assuming a specific parameter processing order. You're free to define custom cascading parameters or directly assign to regular component parameters in order to pass query parameter values to non-routable components. :::moniker-end :::moniker range=">= aspnetcore-6.0" Component parameters supplied from the query string support the following types: * `bool`, `DateTime`, `decimal`, `double`, `float`, `Guid`, `int`, `long`, `string`. * Nullable variants of the preceding types. * Arrays of the preceding types, whether they're nullable or not nullable. The correct culture-invariant formatting is applied for the given type (). Specify the `[SupplyParameterFromQuery]` attribute's property to use a query parameter name different from the component parameter name. In the following example, the C# name of the component parameter is `{COMPONENT PARAMETER NAME}`. A different query parameter name is specified for the `{QUERY PARAMETER NAME}` placeholder: :::moniker-end :::moniker range=">= aspnetcore-8.0" Unlike component parameter properties (`[Parameter]`), `[SupplyParameterFromQuery]` properties can be marked `private` in addition to `public`. ```csharp [SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")] private string? {COMPONENT PARAMETER NAME} { get; set; } ``` :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" Just like component parameter properties (`[Parameter]`), `[SupplyParameterFromQuery]` properties are always `public` properties in .NET 6/7. In .NET 8 or later, `[SupplyParameterFromQuery]` properties can be marked `public` or `private`. ```csharp [Parameter] [SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")] public string? {COMPONENT PARAMETER NAME} { get; set; } ``` :::moniker-end :::moniker range=">= aspnetcore-6.0" In the following example with a URL of `/search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman`: * The `Filter` property resolves to `scifi stars`. * The `Page` property resolves to `3`. * The `Stars` array is filled from query parameters named `star` (`Name = "star"`) and resolves to `LeVar Burton` and `Gary Oldman`. :::moniker-end :::moniker range=">= aspnetcore-8.0" > [!NOTE] > The query string parameters in the following routable page component also work in a *non-routable* component without an `@page` directive (for example, `Search.razor` for a shared `Search` component used in other components). `Search.razor`: ```razor @page "/search"

Search Example

Filter: @Filter

Page: @Page

@if (Stars is not null) {

Stars:

@name

} @code { [SupplyParameterFromQuery] private string? Filter { get; set; } [SupplyParameterFromQuery] private int? Page { get; set; } [SupplyParameterFromQuery(Name = "star")] private string[]? Stars { get; set; } } ``` :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" `Search.razor`: ```razor @page "/search"

Search Example

Filter: @Filter

Page: @Page

@if (Stars is not null) {

Stars:

@name

} @code { [Parameter] [SupplyParameterFromQuery] public string? Filter { get; set; } [Parameter] [SupplyParameterFromQuery] public int? Page { get; set; } [Parameter] [SupplyParameterFromQuery(Name = "star")] public string[]? Stars { get; set; } } ``` :::moniker-end :::moniker range=">= aspnetcore-6.0" Use to add, change, or remove one or more query parameters on the current URL: ```razor @inject NavigationManager Navigation ... Navigation.GetUriWithQueryParameter("{NAME}", {VALUE}) ``` For the preceding example: * The `{NAME}` placeholder specifies the query parameter name. The `{VALUE}` placeholder specifies the value as a supported type. Supported types are listed later in this section. * A string is returned equal to the current URL with a single parameter: * Added if the query parameter name doesn't exist in the current URL. * Updated to the value provided if the query parameter exists in the current URL. * Removed if the type of the provided value is nullable and the value is `null`. * The correct culture-invariant formatting is applied for the given type (). * The query parameter name and value are URL-encoded. * All of the values with the matching query parameter name are replaced if there are multiple instances of the type. Call to create a URI constructed from with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws an error for unsupported types. ```razor @inject NavigationManager Navigation ... Navigation.GetUriWithQueryParameters({PARAMETERS}) ``` The `{PARAMETERS}` placeholder is an `IReadOnlyDictionary`. Pass a URI string to to generate a new URI from a provided URI with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws an error for unsupported types. Supported types are listed later in this section. ```razor @inject NavigationManager Navigation ... Navigation.GetUriWithQueryParameters("{URI}", {PARAMETERS}) ``` * The `{URI}` placeholder is the URI with or without a query string. * The `{PARAMETERS}` placeholder is an `IReadOnlyDictionary`. Supported types are identical to supported types for route constraints: * `bool` * `DateTime` * `decimal` * `double` * `float` * `Guid` * `int` * `long` * `string` Supported types include: * Nullable variants of the preceding types. * Arrays of the preceding types, whether they're nullable or not nullable. [!INCLUDE[](~/blazor/includes/compression-with-untrusted-data.md)] ### Replace a query parameter value when the parameter exists ```csharp Navigation.GetUriWithQueryParameter("full name", "Morena Baccarin") ``` Current URL | Generated URL --- | --- `scheme://host/?full%20name=David%20Krumholtz&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` `scheme://host/?fUlL%20nAmE=David%20Krumholtz&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` `scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer%20Glau` | `scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin` `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` `scheme://host/?full%20name=` | `scheme://host/?full%20name=Morena%20Baccarin` ### Append a query parameter and value when the parameter doesn't exist ```csharp Navigation.GetUriWithQueryParameter("name", "Morena Baccarin") ``` Current URL | Generated URL --- | --- `scheme://host/?age=42` | `scheme://host/?age=42&name=Morena%20Baccarin` `scheme://host/` | `scheme://host/?name=Morena%20Baccarin` `scheme://host/?` | `scheme://host/?name=Morena%20Baccarin` ### Remove a query parameter when the parameter value is `null` ```csharp Navigation.GetUriWithQueryParameter("full name", (string)null) ``` Current URL | Generated URL --- | --- `scheme://host/?full%20name=David%20Krumholtz&age=42` | `scheme://host/?age=42` `scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Summer%20Glau` | `scheme://host/?age=42` `scheme://host/?full%20name=Sally%20Smith&age=42&FuLl%20NaMe=Summer%20Glau` | `scheme://host/?age=42` `scheme://host/?full%20name=&age=42` | `scheme://host/?age=42` `scheme://host/?full%20name=` | `scheme://host/` ### Add, update, and remove query parameters In the following example: * `name` is removed, if present. * `age` is added with a value of `25` (`int`), if not present. If present, `age` is updated to a value of `25`. * `eye color` is added or updated to a value of `green`. ```csharp Navigation.GetUriWithQueryParameters( new Dictionary { ["name"] = null, ["age"] = (int?)25, ["eye color"] = "green" }) ``` Current URL | Generated URL --- | --- `scheme://host/?name=David%20Krumholtz&age=42` | `scheme://host/?age=25&eye%20color=green` `scheme://host/?NaMe=David%20Krumholtz&AgE=42` | `scheme://host/?age=25&eye%20color=green` `scheme://host/?name=David%20Krumholtz&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` `scheme://host/?age=42&eye%20color=87` | `scheme://host/?age=25&eye%20color=green` `scheme://host/?` | `scheme://host/?age=25&eye%20color=green` `scheme://host/` | `scheme://host/?age=25&eye%20color=green` ### Support for enumerable values In the following example: * `full name` is added or updated to `Morena Baccarin`, a single value. * `ping` parameters are added or replaced with `35`, `16`, `87` and `240`. ```csharp Navigation.GetUriWithQueryParameters( new Dictionary { ["full name"] = "Morena Baccarin", ["ping"] = new int?[] { 35, 16, null, 87, 240 } }) ``` Current URL | Generated URL --- | --- `scheme://host/?full%20name=David%20Krumholtz&ping=8&ping=300` | `scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240` `scheme://host/?ping=8&full%20name=David%20Krumholtz&ping=300` | `scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240` `scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42` | `scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=Morena%20Baccarin` ### Navigate with an added or modified query string To navigate with an added or modified query string, pass a generated URL to . The following example calls: * to add or replace the `name` query parameter using a value of `Morena Baccarin`. * Calls to trigger navigation to the new URL. ```csharp Navigation.NavigateTo( Navigation.GetUriWithQueryParameter("name", "Morena Baccarin")); ``` :::moniker-end :::moniker range="< aspnetcore-6.0" The query string of a request is obtained from the property: ```razor @inject NavigationManager Navigation ... var query = new Uri(Navigation.Uri).Query; ``` To parse a query string's parameters, one approach is to use [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) with [JavaScript (JS) interop](xref:blazor/js-interop/call-javascript-from-dotnet): ```javascript export createQueryString = (string queryString) => new URLSearchParams(queryString); ``` For more information on JavaScript isolation with JavaScript modules, see . :::moniker-end :::moniker range=">= aspnetcore-8.0" ## Hashed routing to named elements Navigate to a named element using the following approaches with a hashed (`#`) reference to the element. Routes to elements within the component and routes to elements in external components use root-relative paths. A leading forward slash (`/`) is optional. Examples for each of the following approaches demonstrate navigation to an element with an `id` of `targetElement` in the `Counter` component: * Anchor element (``) with an `href`: ```razor ``` * component with an `href`: ```razor ``` * passing the relative URL: ```csharp Navigation.NavigateTo("/counter#targetElement"); ``` The following example demonstrates hashed routing to named H2 headings within a component and to external components. In the `Home` (`Home.razor`) and `Counter` (`Counter.razor`) components, place the following markup at the bottoms of the existing component markup to serve as navigation targets. The `

` creates artificial vertical space to demonstrate browser scrolling behavior: ```razor

Target H2 heading

Content!

``` Add the following `HashedRouting` component to the app. `HashedRouting.razor`: ```razor @page "/hashed-routing" @inject NavigationManager Navigation Hashed routing

Hashed routing to named elements

Anchor in this component
Anchor to the Home component
Anchor to the Counter component
Use a `NavLink` component in this component

Target H2 heading

Content!

@code { private void NavigateToElement() { Navigation.NavigateTo("/counter#targetElement"); } } ``` :::moniker-end :::moniker range=">= aspnetcore-5.0" ## User interaction with `` content If there's a significant delay during navigation, such as while [lazy-loading assemblies in a Blazor WebAssembly app](xref:blazor/webassembly-lazy-load-assemblies) or for a slow network connection to a Blazor server-side app, the component can indicate to the user that a page transition is occurring. At the top of the component that specifies the component, add an [`@using`](xref:mvc/views/razor#using) directive for the namespace: ```razor @using Microsoft.AspNetCore.Components.Routing ``` Provide content to the parameter for display during page transition events. In the router element (`...`) content: ```razor

Loading the requested page…

``` For an example that uses the property, see . :::moniker-end :::moniker range=">= aspnetcore-5.0" ## Handle asynchronous navigation events with `OnNavigateAsync` The component supports an feature. The handler is invoked when the user: * Visits a route for the first time by navigating to it directly in their browser. * Navigates to a new route using a link or a invocation. :::moniker-end :::moniker range=">= aspnetcore-6.0" ```razor ... @code { private async Task OnNavigateAsync(NavigationContext args) { ... } } ``` :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" ```razor ... @code { private async Task OnNavigateAsync(NavigationContext args) { ... } } ``` :::moniker-end :::moniker range=">= aspnetcore-5.0" For an example that uses , see . When prerendering on the server, is executed *twice*: * Once when the requested endpoint component is initially rendered statically. * A second time when the browser renders the endpoint component. :::moniker-end :::moniker range=">= aspnetcore-8.0" To prevent developer code in from executing twice, the `Routes` component can store the for use in the [`OnAfterRender{Async}` lifecycle method](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync), where `firstRender` can be checked. For more information, see [Prerendering with JavaScript interop](xref:blazor/components/lifecycle#prerendering-with-javascript-interop). :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-8.0" To prevent developer code in from executing twice, the `App` component can store the for use in [`OnAfterRender{Async}`](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync), where `firstRender` can be checked. For more information, see [Prerendering with JavaScript interop](xref:blazor/components/lifecycle#prerendering-with-javascript-interop). :::moniker-end :::moniker range=">= aspnetcore-5.0" ## Handle cancellations in `OnNavigateAsync` The object passed to the callback contains a that's set when a new navigation event occurs. The callback must throw when this cancellation token is set to avoid continuing to run the callback on an outdated navigation. If a user navigates to an endpoint but then immediately navigates to a new endpoint, the app shouldn't continue running the callback for the first endpoint. In the following example: * The cancellation token is passed in the call to `PostAsJsonAsync`, which can cancel the POST if the user navigates away from the `/about` endpoint. * The cancellation token is set during a product prefetch operation if the user navigates away from the `/store` endpoint. :::moniker-end :::moniker range=">= aspnetcore-6.0" ```razor @inject HttpClient Http @inject ProductCatalog Products ... @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); } } } } ``` :::moniker-end :::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0" ```razor @inject HttpClient Http @inject ProductCatalog Products ... @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); } } } } ``` :::moniker-end :::moniker range=">= aspnetcore-5.0" > [!NOTE] > Not throwing if the cancellation token in is canceled can result in unintended behavior, such as rendering a component from a previous navigation. :::moniker-end :::moniker range=">= aspnetcore-7.0" ## Handle/prevent location changes registers a handler to process incoming navigation events. The handler's context provided by includes the following properties: * : Gets the target location. * : Gets the state associated with the target history entry. * : Gets whether the navigation was intercepted from a link. * : Gets a to determine if the navigation was canceled, for example, to determine if the user triggered a different navigation. * : Called to prevent the navigation from continuing. A component can register multiple location changing handlers in the [`OnAfterRender{Async}` lifecycle method](xref:blazor/components/lifecycle#after-component-render-onafterrenderasync). Navigation invokes all of the location changing handlers registered across the entire app (across multiple components), and any internal navigation executes them all in parallel. In addition to handlers are invoked: * When selecting internal links, which are links that point to URLs under the app's base path. * When navigating using the forward and back buttons in a browser. Handlers are only executed for internal navigation within the app. If the user selects a link that navigates to a different site or changes the address bar to a different site manually, location changing handlers aren't executed. Implement and dispose registered handlers to unregister them. For more information, see . > [!IMPORTANT] > Don't attempt to execute DOM cleanup tasks via JavaScript (JS) interop when handling location changes. Use the [`MutationObserver` pattern](https://developer.mozilla.org/docs/Web/API/MutationObserver) in JS on the client. For more information, see . In the following example, a location changing handler is registered for navigation events. `NavHandler.razor`: ```razor @page "/nav-handler" @implements IDisposable @inject NavigationManager Navigation

@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(); } ``` Since internal navigation can be canceled asynchronously, multiple overlapping calls to registered handlers may occur. For example, multiple handler calls may occur when the user rapidly selects the back button on a page or selects multiple links before a navigation is executed. The following is a summary of the asynchronous navigation logic: * If any location changing handlers are registered, all navigation is initially reverted, then replayed if the navigation isn't canceled. * If overlapping navigation requests are made, the latest request always cancels earlier requests, which means the following: * The app may treat multiple back and forward button selections as a single selection. * If the user selects multiple links before the navigation completes, the last link selected determines the navigation. For more information on passing to to control entries and state of the navigation history stack, see the [Navigation options](#navigation-options) section. For additional example code, see the [`NavigationManagerComponent` in the `BasicTestApp` (`dotnet/aspnetcore` reference source)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/RouterTest/NavigationManagerComponent.razor). [!INCLUDE[](~/includes/aspnetcore-repo-ref-source-links.md)] The [`NavigationLock` component](xref:Microsoft.AspNetCore.Components.Routing.NavigationLock) intercepts navigation events as long as it is rendered, effectively "locking" any given navigation until a decision is made to either proceed or cancel. Use `NavigationLock` when navigation interception can be scoped to the lifetime of a component. parameters: * sets a browser dialog to prompt the user to either confirm or cancel external navigation. The default value is `false`. Displaying the confirmation dialog requires initial user interaction with the page before triggering external navigation with the URL in the browser's address bar. For more information on the interaction requirement, see [Window: `beforeunload` event (MDN documentation)](https://developer.mozilla.org/docs/Web/API/Window/beforeunload_event). * sets a callback for internal navigation events. In the following `NavLock` component: * An attempt to follow the link to Microsoft's website must be confirmed by the user before the navigation to `https://www.microsoft.com` succeeds. * is called to prevent navigation from occurring if the user declines to confirm the navigation via a [JavaScript (JS) interop call](xref:blazor/js-interop/call-javascript-from-dotnet) that spawns the [JS `confirm` dialog](https://developer.mozilla.org/docs/Web/API/Window/confirm). `NavLock.razor`: ```razor @page "/nav-lock" @inject IJSRuntime JSRuntime @inject NavigationManager Navigation

Microsoft homepage

@code { private void Navigate() { Navigation.NavigateTo("/"); } private async Task OnBeforeInternalNavigation(LocationChangingContext context) { var isConfirmed = await JSRuntime.InvokeAsync("confirm", "Are you sure you want to navigate to the root page?"); if (!isConfirmed) { context.PreventNavigation(); } } } ``` For additional example code, see the [`ConfigurableNavigationLock` component in the `BasicTestApp` (`dotnet/aspnetcore` reference source)](https://github.com/dotnet/aspnetcore/blob/main/src/Components/test/testassets/BasicTestApp/RouterTest/ConfigurableNavigationLock.razor). :::moniker-end ## `NavLink` component Use a component in place of HTML hyperlink elements (``) when creating navigation links. A component behaves like an `` element, except it toggles an `active` CSS class based on whether its `href` matches the current URL. The `active` class helps a user understand which page is the active page among the navigation links displayed. Optionally, assign a CSS class name to to apply a custom CSS class to the rendered link when the current route matches the `href`. There are two options that you can assign to the `Match` attribute of the `` element: * : The is active when it matches the entire current URL. * (*default*): The is active when it matches any prefix of the current URL. In the preceding example, the Home `href=""` matches the home URL and only receives the `active` CSS class at the app's default base path (`/`). The second receives the `active` class when the user visits any URL with a `component` prefix (for example, `/component` and `/component/another-segment`). Additional component attributes are passed through to the rendered anchor tag. In the following example, the component includes the `target` attribute: ```razor Example page ``` The following HTML markup is rendered: ```html Example page ``` > [!WARNING] > Due to the way that Blazor renders child content, rendering `NavLink` components inside a `for` loop requires a local index variable if the incrementing loop variable is used in the `NavLink` (child) component's content: > > ```razor > @for (int c = 1; c < 4; c++) > { > var ct = c; >

> > Product #@ct > >

> } > ``` > > Using an index variable in this scenario is a requirement for **any** child component that uses a loop variable in its [child content](xref:blazor/components/index#child-content-render-fragments), not just the `NavLink` component. > > Alternatively, use a `foreach` loop with : > > ```razor > @foreach (var c in Enumerable.Range(1, 3)) > { >

> > Product #@c > >

> } > ``` component entries can be dynamically created from the app's components via reflection. The following example demonstrates the general approach for further customization. For the following demonstration, a consistent, standard naming convention is used for the app's components: * Routable component file names use Pascal case†, for example `Pages/ProductDetail.razor`. * Routable component file paths match their URLs in kebab case‡ with hyphens appearing between words in a component's route template. For example, a `ProductDetail` component with a route template of `/product-detail` (`@page "/product-detail"`) is requested in a browser at the relative URL `/product-detail`. †Pascal case (upper camel case) is a naming convention without spaces and punctuation and with the first letter of each word capitalized, including the first word. ‡Kebab case is a naming convention without spaces and punctuation that uses lowercase letters and dashes between words. In the Razor markup of the `NavMenu` component (`NavMenu.razor`) under the default `Home` page, components are added from a collection: ```diff

``` The `GetRoutableComponents` method in the `@code` block: ```csharp public IEnumerable GetRoutableComponents() => Assembly.GetExecutingAssembly() .ExportedTypes .Where(t => t.IsSubclassOf(typeof(ComponentBase))) .Where(c => c.GetCustomAttributes(inherit: true) .OfType() .Any()) .Where(c => c.Name != "Home" && c.Name != "Error") .OrderBy(o => o.Name) .Select(c => c.Name); ``` The preceding example doesn't include the following pages in the rendered list of components: * `Home` page: The page is listed separately from the automatically generated links because it should appear at the top of the list and set the `Match` parameter. * `Error` page: The error page is only navigated to by the framework and shouldn't be listed. :::moniker range=">= aspnetcore-8.0" For an example of the preceding code in a sample app that you can run locally, obtain the [**Blazor Web App** or **Blazor WebAssembly** sample app](xref:blazor/fundamentals/index#sample-apps). :::moniker-end ## ASP.NET Core endpoint routing integration :::moniker range=">= aspnetcore-8.0" *This section applies to Blazor Web Apps operating over a circuit.* :::moniker-end :::moniker range="< aspnetcore-8.0" *This section applies to Blazor Server apps.* :::moniker-end :::moniker range=">= aspnetcore-8.0" A Blazor Web App is integrated into [ASP.NET Core Endpoint Routing](xref:fundamentals/routing). An ASP.NET Core app is configured to accept incoming connections for interactive components with in the `Program` file. The default root component (first component loaded) is the `App` component (`App.razor`): ```csharp app.MapRazorComponents(); ``` :::moniker-end :::moniker range=">= aspnetcore-6.0 < aspnetcore-8.0" Blazor Server is integrated into [ASP.NET Core Endpoint Routing](xref:fundamentals/routing). An ASP.NET Core app is configured to accept incoming connections for interactive components with in the `Program` file: ```csharp app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); ``` :::moniker-end :::moniker range="< aspnetcore-6.0" Blazor Server is integrated into [ASP.NET Core Endpoint Routing](xref:fundamentals/routing). An ASP.NET Core app is configured to accept incoming connections for interactive components with in `Startup.Configure`. :::moniker-end :::moniker range="< aspnetcore-8.0" The typical configuration is to route all requests to a Razor page, which acts as the host for the server-side part of the Blazor Server app. By convention, the *host* page is usually named `_Host.cshtml` in the `Pages` folder of the app. The route specified in the host file is called a *fallback route* because it operates with a low priority in route matching. The fallback route is used when other routes don't match. This allows the app to use other controllers and pages without interfering with component routing in the Blazor Server app. For information on configuring for non-root URL server hosting, see . :::moniker-end