The @page directive makes a Razor Page or Razor component reachable through URL routing. The syntax looks similar in both places, but the routing conventions differ: a Razor Page starts with a file-based route, while a component declares the URLs that display it. section 23.2.2 section 35.2.2
Choose the form that matches the file:
- In a Razor Page (.cshtml), put @page first so the file is treated as a page rather than a controller view. A bare @page uses the route derived from the file’s location under Pages; Pages/Index.cshtml handles /index. section 23.2.2
- Give a Razor Page a pattern such as @page "{id:long?}" to accept an optional, long-valued URL segment. The route value can supply an OnGetAsync(long id) parameter through model binding. An explicit path such as @page "/lists/suppliers" replaces that page’s file-based route. section 23.3.1
- In a Razor component (.razor), repeat @page to support multiple URLs. For example, @page "/admin/products" and @page "/admin" display the same component; @page "/" can identify the component shown at the application’s default URL when a fallback route is configured. section 10.1.4 section 35.2.2
Do not assume route-pattern support is identical. The Razor Page pattern above accepts an optional segment. Component @page patterns do not support optional or catchall segment variables; declare two component routes when one must omit the segment. A component can receive a matched value through a same-named property marked [Parameter]. section 23.3.1 section 35.2.2 section 35.2.4
Listing 35.11 The contents of the PersonDisplay.razor file in the Blazor folder
@page "/person"
@page "/person/{id:long}"
<h5>Editor for Person: @Id</h5>
<NavLink class="btn btn-primary" href="/people">Return</NavLink>
@code {
[Parameter]
public long Id { get; set; }
}
The component declares both /person and /person/{id:long}; its [Parameter] property receives the id from the second route. section 35.2.4
To add a second route to a Razor Page, use RazorPagesOptions.Conventions.AddPageRoute in Program.cs instead of repeating its @page directive. The added pattern supplements the route already defined for the page. After a routing change, restart ASP.NET Core and request each URL to check which page or component appears. section 23.3.2 section 35.2.2
