Skip to content

Commit 428f8c9

Browse files
committed
Split the Routing & Navigation article
1 parent cf60c63 commit 428f8c9

File tree

29 files changed

+1711
-1676
lines changed

29 files changed

+1711
-1676
lines changed

aspnetcore/blazor/call-web-api.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -626,14 +626,14 @@ When prerendering, components render twice: first statically, then interactively
626626
You can address this by flowing prerendered state using the Persistent Component State API, which the `BlazorWebAppCallWebApi` and `BlazorWebAppCallWebApi_Weather` [sample apps](#sample-apps) demonstrate. When the component renders interactively, it can render the same way using the same state. For more information, see the following resources:
627627
628628
* <xref:blazor/state-management/prerendered-state-persistence>
629-
* <xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling>
629+
* <xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling>
630630
631631
:::moniker-end
632632
633633
:::moniker range="< aspnetcore-10.0"
634634
635635
> [!NOTE]
636-
> The Persistent Component State API only supports enhanced navigation in .NET 10 or later. For apps that target .NET 8 or .NET 9, you can disable enhanced navigation on links to the page with the `data-enhance-nav` attribute set to `false`. For more information, see <xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling>.
636+
> The Persistent Component State API only supports enhanced navigation in .NET 10 or later. For apps that target .NET 8 or .NET 9, you can disable enhanced navigation on links to the page with the `data-enhance-nav` attribute set to `false`. For more information, see <xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling>.
637637
638638
:::moniker-end
639639

aspnetcore/blazor/components/built-in-components.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ The following built-in Razor components are provided by the Blazor framework. Fo
3939
* [`InputTextArea`](xref:blazor/forms/input-components)
4040
* [`LayoutComponentBase`](xref:blazor/components/layouts#create-a-layout-component)
4141
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
42-
* [`NavigationLock`](xref:blazor/fundamentals/routing#handleprevent-location-changes)
43-
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-component)
42+
* [`NavigationLock`](xref:blazor/fundamentals/navigation#handleprevent-location-changes)
43+
* [`NavLink`](xref:blazor/fundamentals/navigation#navlink-component)
4444
* [`PageTitle`](xref:blazor/components/control-head-content)
4545
* [`OwningComponentBase`](xref:fundamentals/dependency-injection#utility-base-component-classes-to-manage-a-di-scope)
4646
* [`Paginator`](xref:blazor/components/quickgrid#page-items-with-a-paginator-component)
@@ -79,8 +79,8 @@ The following built-in Razor components are provided by the Blazor framework. Fo
7979
* [`InputTextArea`](xref:blazor/forms/input-components)
8080
* [`LayoutComponentBase`](xref:blazor/components/layouts#create-a-layout-component)
8181
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
82-
* [`NavigationLock`](xref:blazor/fundamentals/routing#handleprevent-location-changes)
83-
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-component)
82+
* [`NavigationLock`](xref:blazor/fundamentals/navigation#handleprevent-location-changes)
83+
* [`NavLink`](xref:blazor/fundamentals/navigation#navlink-component)
8484
* [`PageTitle`](xref:blazor/components/control-head-content)
8585
* [`OwningComponentBase`](xref:fundamentals/dependency-injection#utility-base-component-classes-to-manage-a-di-scope)
8686
* [`Paginator`](xref:blazor/components/quickgrid#page-items-with-a-paginator-component)
@@ -117,8 +117,8 @@ The following built-in Razor components are provided by the Blazor framework. Fo
117117
* [`InputTextArea`](xref:blazor/forms/input-components)
118118
* [`LayoutComponentBase`](xref:blazor/components/layouts#create-a-layout-component)
119119
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
120-
* [`NavigationLock`](xref:blazor/fundamentals/routing#handleprevent-location-changes)
121-
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-component)
120+
* [`NavigationLock`](xref:blazor/fundamentals/navigation#handleprevent-location-changes)
121+
* [`NavLink`](xref:blazor/fundamentals/navigation#navlink-component)
122122
* [`OwningComponentBase`](xref:fundamentals/dependency-injection#utility-base-component-classes-to-manage-a-di-scope)
123123
* [`PageTitle`](xref:blazor/components/control-head-content)
124124
* [`Router`](xref:blazor/fundamentals/routing#route-templates)
@@ -151,7 +151,7 @@ The following built-in Razor components are provided by the Blazor framework. Fo
151151
* [`InputTextArea`](xref:blazor/forms/input-components)
152152
* [`LayoutComponentBase`](xref:blazor/components/layouts#create-a-layout-component)
153153
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
154-
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-component)
154+
* [`NavLink`](xref:blazor/fundamentals/navigation#navlink-component)
155155
* [`OwningComponentBase`](xref:fundamentals/dependency-injection#utility-base-component-classes-to-manage-a-di-scope)
156156
* [`PageTitle`](xref:blazor/components/control-head-content)
157157
* [`Router`](xref:blazor/fundamentals/routing#route-templates)
@@ -179,7 +179,7 @@ The following built-in Razor components are provided by the Blazor framework. Fo
179179
* [`InputTextArea`](xref:blazor/forms/input-components)
180180
* [`LayoutComponentBase`](xref:blazor/components/layouts#create-a-layout-component)
181181
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
182-
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-component)
182+
* [`NavLink`](xref:blazor/fundamentals/navigation#navlink-component)
183183
* [`OwningComponentBase`](xref:fundamentals/dependency-injection#utility-base-component-classes-to-manage-a-di-scope)
184184
* [`Router`](xref:blazor/fundamentals/routing#route-templates)
185185
* [`RouteView`](xref:blazor/fundamentals/routing#route-templates)
@@ -205,7 +205,7 @@ The following built-in Razor components are provided by the Blazor framework. Fo
205205
* [`InputTextArea`](xref:blazor/forms/input-components)
206206
* [`LayoutComponentBase`](xref:blazor/components/layouts#create-a-layout-component)
207207
* [`LayoutView`](xref:blazor/components/layouts#apply-a-layout-to-arbitrary-content-layoutview-component)
208-
* [`NavLink`](xref:blazor/fundamentals/routing#navlink-component)
208+
* [`NavLink`](xref:blazor/fundamentals/navigation#navlink-component)
209209
* [`OwningComponentBase`](xref:fundamentals/dependency-injection#utility-base-component-classes-to-manage-a-di-scope)
210210
* [`Router`](xref:blazor/fundamentals/routing#route-templates)
211211
* [`RouteView`](xref:blazor/fundamentals/routing#route-templates)

aspnetcore/blazor/components/index.md

Lines changed: 1 addition & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Learn how to create and use Razor components in Blazor apps, includ
55
monikerRange: '>= aspnetcore-3.1'
66
ms.author: wpickett
77
ms.custom: mvc
8-
ms.date: 11/12/2024
8+
ms.date: 09/23/2025
99
uid: blazor/components/index
1010
---
1111
# ASP.NET Core Razor components
@@ -528,54 +528,6 @@ In the following example, the `BlazorRocksBase1` base class derives from <xref:M
528528

529529
:::moniker-end
530530

531-
### Routing
532-
533-
Routing in Blazor is achieved by providing a route template to each accessible component in the app with an [`@page`][9] directive. When a Razor file with an [`@page`][9] directive is compiled, the generated class is given a <xref:Microsoft.AspNetCore.Mvc.RouteAttribute> specifying the route template. At runtime, the router searches for component classes with a <xref:Microsoft.AspNetCore.Mvc.RouteAttribute> and renders whichever component has a route template that matches the requested URL.
534-
535-
The following `HelloWorld` component uses a route template of `/hello-world`, and the rendered webpage for the component is reached at the relative URL `/hello-world`.
536-
537-
`HelloWorld.razor`:
538-
539-
:::moniker range=">= aspnetcore-9.0"
540-
541-
:::code language="razor" source="~/../blazor-samples/9.0/BlazorSample_BlazorWebApp/Components/Pages/HelloWorld.razor":::
542-
543-
:::moniker-end
544-
545-
:::moniker range=">= aspnetcore-8.0 < aspnetcore-9.0"
546-
547-
:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/HelloWorld.razor":::
548-
549-
:::moniker-end
550-
551-
:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"
552-
553-
:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/index/HelloWorld.razor":::
554-
555-
:::moniker-end
556-
557-
:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"
558-
559-
:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_WebAssembly/Pages/index/HelloWorld.razor":::
560-
561-
:::moniker-end
562-
563-
:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"
564-
565-
:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_WebAssembly/Pages/index/HelloWorld.razor":::
566-
567-
:::moniker-end
568-
569-
:::moniker range="< aspnetcore-5.0"
570-
571-
:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_WebAssembly/Pages/index/HelloWorld.razor":::
572-
573-
:::moniker-end
574-
575-
The preceding component loads in the browser at `/hello-world` regardless of whether or not you add the component to the app's UI navigation. Optionally, components can be added to the `NavMenu` component so that a link to the component appears in the app's UI-based navigation.
576-
577-
For the preceding `HelloWorld` component, you can add a `NavLink` component to the `NavMenu` component. For more information, including descriptions of the `NavLink` and `NavMenu` components, see <xref:blazor/fundamentals/routing>.
578-
579531
### Markup
580532

581533
A component's UI is defined using [Razor syntax](xref:mvc/views/razor), which consists of Razor markup, C#, and HTML. When an app is compiled, the HTML markup and C# rendering logic are converted into a component class. The name of the generated class matches the name of the file.

aspnetcore/blazor/components/render-modes.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,7 +357,7 @@ During static SSR, Razor component page requests are processed by server-side AS
357357

358358
If the app exhibits root-level interactivity, server-side ASP.NET Core request processing isn't involved after the initial static SSR, which means that the preceding Blazor features work as expected.
359359

360-
[Enhanced navigation](xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling) with static SSR requires special attention when loading JavaScript. For more information, see <xref:blazor/js-interop/ssr>.
360+
[Enhanced navigation](xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling) with static SSR requires special attention when loading JavaScript. For more information, see <xref:blazor/js-interop/ssr>.
361361

362362
## Interactive server-side rendering (interactive SSR)
363363

aspnetcore/blazor/components/rendering.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ To stream content updates when using static server-side rendering (static SSR) o
5757

5858
:::moniker range=">= aspnetcore-10.0"
5959

60-
If [enhanced navigation](xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling) is active, streaming rendering renders [Not Found responses](xref:blazor/fundamentals/routing#not-found-responses) without reloading the page. When enhanced navigation is blocked, the framework redirects to Not Found content with a page refresh.
60+
If [enhanced navigation](xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling) is active, streaming rendering renders [Not Found responses](xref:blazor/fundamentals/navigation#not-found-responses) without reloading the page. When enhanced navigation is blocked, the framework redirects to Not Found content with a page refresh.
6161

62-
Streaming rendering can only render components that have a route, such as a [`NotFoundPage` assignment](xref:blazor/fundamentals/routing#not-found-responses) (`NotFoundPage="..."`) or a [Status Code Pages Re-execution Middleware page assignment](xref:fundamentals/error-handling#usestatuscodepageswithreexecute) (<xref:Microsoft.AspNetCore.Builder.StatusCodePagesExtensions.UseStatusCodePagesWithReExecute%2A>). The Not Found render fragment (`<NotFound>...</NotFound>`) and the `DefaultNotFound` 404 content ("`Not found`" plain text) don't have routes, so they can't be used during streaming rendering.
62+
Streaming rendering can only render components that have a route, such as a [`NotFoundPage` assignment](xref:blazor/fundamentals/navigation#not-found-responses) (`NotFoundPage="..."`) or a [Status Code Pages Re-execution Middleware page assignment](xref:fundamentals/error-handling#usestatuscodepageswithreexecute) (<xref:Microsoft.AspNetCore.Builder.StatusCodePagesExtensions.UseStatusCodePagesWithReExecute%2A>). The Not Found render fragment (`<NotFound>...</NotFound>`) and the `DefaultNotFound` 404 content ("`Not found`" plain text) don't have routes, so they can't be used during streaming rendering.
6363

6464
Streaming `NavigationManager.NotFound` content rendering uses (in order):
6565

aspnetcore/blazor/forms/index.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ In the preceding `StarshipPlainForm` component:
7676
> [!IMPORTANT]
7777
> Always use the [`@formname`](xref:mvc/views/razor#formname) directive attribute with a unique form name.
7878
79-
Blazor enhances page navigation and form handling by intercepting the request in order to apply the response to the existing DOM, preserving as much of the rendered form as possible. The enhancement avoids the need to fully load the page and provides a much smoother user experience, similar to a single-page app (SPA), although the component is rendered on the server. For more information, see <xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling>.
79+
Blazor enhances page navigation and form handling by intercepting the request in order to apply the response to the existing DOM, preserving as much of the rendered form as possible. The enhancement avoids the need to fully load the page and provides a much smoother user experience, similar to a single-page app (SPA), although the component is rendered on the server. For more information, see <xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling>.
8080

8181
<!-- UPDATE 11.0 - Check the PU issue (backlogged as of 2/27/25 -->
8282

@@ -124,7 +124,7 @@ In the preceding `Starship1` component:
124124
> [!IMPORTANT]
125125
> Always use the <xref:Microsoft.AspNetCore.Components.Forms.EditForm.FormName> property with a unique form name.
126126
127-
Blazor enhances page navigation and form handling for <xref:Microsoft.AspNetCore.Components.Forms.EditForm> components. For more information, see <xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling>.
127+
Blazor enhances page navigation and form handling for <xref:Microsoft.AspNetCore.Components.Forms.EditForm> components. For more information, see <xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling>.
128128

129129
<!-- UPDATE 11.0 - Check the PU issue (backlogged as of 2/27/25 -->
130130

@@ -337,7 +337,7 @@ To mitigate overposting, we recommend using a separate view model/data transfer
337337
338338
## Enhanced form handling
339339
340-
[Enhance navigation](xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling) for form POST requests with the <xref:Microsoft.AspNetCore.Components.Forms.EditForm.Enhance%2A> parameter for <xref:Microsoft.AspNetCore.Components.Forms.EditForm> forms or the `data-enhance` attribute for HTML forms (`<form>`):
340+
[Enhance navigation](xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling) for form POST requests with the <xref:Microsoft.AspNetCore.Components.Forms.EditForm.Enhance%2A> parameter for <xref:Microsoft.AspNetCore.Components.Forms.EditForm> forms or the `data-enhance` attribute for HTML forms (`<form>`):
341341
342342
```razor
343343
<EditForm ... Enhance ...>
@@ -380,7 +380,7 @@ In the following example, the content of the `<div>` element is updated dynamica
380380

381381
To disable enhanced navigation and form handling globally, see <xref:blazor/fundamentals/startup#enhanced-navigation-and-form-handling>.
382382

383-
For guidance on using the `enhancedload` event to listen for enhanced page updates, see <xref:blazor/fundamentals/routing#enhanced-navigation-and-form-handling>.
383+
For guidance on using the `enhancedload` event to listen for enhanced page updates, see <xref:blazor/fundamentals/navigation#enhanced-navigation-and-form-handling>.
384384

385385
:::moniker-end
386386

aspnetcore/blazor/fundamentals/dependency-injection.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ The services shown in the following table are commonly used in Blazor apps.
3232
| ------- | -------- | ----------- |
3333
| <xref:System.Net.Http.HttpClient> | Scoped | <p>Provides methods for sending HTTP requests and receiving HTTP responses from a resource identified by a URI.</p><p>Client-side, an instance of <xref:System.Net.Http.HttpClient> is registered by the app in the `Program` file and uses the browser for handling the HTTP traffic in the background.</p><p>Server-side, an <xref:System.Net.Http.HttpClient> isn't configured as a service by default. In server-side code, provide an <xref:System.Net.Http.HttpClient>.</p><p>For more information, see <xref:blazor/call-web-api>.</p><p>An <xref:System.Net.Http.HttpClient> is registered as a scoped service, not singleton. For more information, see the [Service lifetime](#service-lifetime) section.</p> |
3434
| <xref:Microsoft.JSInterop.IJSRuntime> | <p>**Client-side**: Singleton</p><p>**Server-side**: Scoped</p><p>The Blazor framework registers <xref:Microsoft.JSInterop.IJSRuntime> in the app's service container.</p> | <p>Represents an instance of a JavaScript runtime where JavaScript calls are dispatched. For more information, see <xref:blazor/js-interop/call-javascript-from-dotnet>.</p><p>When seeking to inject the service into a singleton service on the server, take either of the following approaches:</p><ul><li>Change the service registration to scoped to match <xref:Microsoft.JSInterop.IJSRuntime>'s registration, which is appropriate if the service deals with user-specific state.</li><li>Pass the <xref:Microsoft.JSInterop.IJSRuntime> into the singleton service's implementation as an argument of its method calls instead of injecting it into the singleton.</li></ul> |
35-
| <xref:Microsoft.AspNetCore.Components.NavigationManager> | <p>**Client-side**: Singleton</p><p>**Server-side**: Scoped</p><p>The Blazor framework registers <xref:Microsoft.AspNetCore.Components.NavigationManager> in the app's service container.</p> | Contains helpers for working with URIs and navigation state. For more information, see [URI and navigation state helpers](xref:blazor/fundamentals/routing#uri-and-navigation-state-helpers). |
35+
| <xref:Microsoft.AspNetCore.Components.NavigationManager> | <p>**Client-side**: Singleton</p><p>**Server-side**: Scoped</p><p>The Blazor framework registers <xref:Microsoft.AspNetCore.Components.NavigationManager> in the app's service container.</p> | Contains helpers for working with URIs and navigation state. For more information, see [URI and navigation state helpers](xref:blazor/fundamentals/navigation#uri-and-navigation-state-helpers). |
3636

3737
Additional services registered by the Blazor framework are described in the documentation where they're used to describe Blazor features, such as configuration and logging.
3838

0 commit comments

Comments
 (0)