--- title: Razor Components routing author: guardrex description: Learn how to route requests in apps and about the NavLink component. monikerRange: '>= aspnetcore-3.0' ms.author: riande ms.custom: mvc ms.date: 02/01/2019 uid: razor-components/routing --- # Razor Components routing By [Luke Latham](https://github.com/guardrex) Learn how to route requests in apps and about the NavLink component. [View or download sample code](https://github.com/aspnet/Docs/tree/master/aspnetcore/razor-components/common/samples/) ([how to download](xref:index#how-to-download-a-sample)). See the [Get started](xref:razor-components/get-started) topic for prerequisites. ## Route templates The `` component enables routing, and a route template is provided to each accessible component. The `` component appears in the *App.cshtml* file: ```cshtml ``` When a *\*.cshtml* file with an `@page` directive is compiled, the generated class is given a [RouteAttribute](/dotnet/api/microsoft.aspnetcore.mvc.routeattribute) specifying the route template. At runtime, the router looks for component classes with a `RouteAttribute` and renders whichever component has a route template that matches the requested URL. Multiple route templates can be applied to a component. In the [sample app](https://github.com/aspnet/Docs/tree/master/aspnetcore/razor-components/common/samples/), the following component responds to requests for `/BlazorRoute` and `/DifferentBlazorRoute`. *Pages/BlazorRoute.cshtml*: [!code-cshtml[](common/samples/3.x/BlazorSample/Pages/BlazorRoute.cshtml?start=1&end=4)] `` supports setting a fallback component for rendering when a requested route isn't resolved. Enable this opt-in scenario by setting the `FallbackComponent` parameter to the type of the fallback component class. The following example sets a component defined in *Pages/MyFallbackRazorComponent.cshtml* as the fallback component for a ``: ```cshtml ``` > [!IMPORTANT] > To generate routes properly, the app must include a `` tag in its *wwwroot/index.html* file with the app base path specified in the `href` attribute (``). For more information, see [Host and deploy: App base path](xref:host-and-deploy/razor-components/index#app-base-path). ## Route parameters The router uses route parameters to populate the corresponding component parameters with the same name (case insensitive). *Pages/RouteParameter.cshtml*: [!code-cshtml[](common/samples/3.x/BlazorSample/Pages/RouteParameter.cshtml?start=1&end=8)] Optional parameters aren't supported yet, so two `@page` directives are applied in the example above. The first permits navigation to the component without a parameter. The second `@page` directive takes the `{text}` route parameter and assigns the value to the `Text` property. ## Route constraints A route constraint enforces type matching on a route segment to a component. In the following example, the route to the Users component only matches if: * An `Id` route segment is present on the request URL. * The `Id` segment is an integer (`int`). ```cshtml @page "/Users/{Id:int}"

The user Id is @Id!

@functions { [Parameter] private int Id { get; set; } } ``` The route constraints shown in the following table are available for use. For the route constraints that match with the invariant culture, see the warning below the table for more information. | Constraint | Example | Example Matches | Invariant
culture
matching | | ---------- | ----------------- | -------------------------------------------------------------------------------- | :------------------------------: | | `bool` | `{active:bool}` | `true`, `FALSE` | No | | `datetime` | `{dob:datetime}` | `2016-12-31`, `2016-12-31 7:32pm` | Yes | | `decimal` | `{price:decimal}` | `49.99`, `-1,000.01` | Yes | | `double` | `{weight:double}` | `1.234`, `-1,001.01e8` | Yes | | `float` | `{weight:float}` | `1.234`, `-1,001.01e8` | Yes | | `guid` | `{id:guid}` | `CD2C1638-1638-72D5-1638-DEADBEEF1638`, `{CD2C1638-1638-72D5-1638-DEADBEEF1638}` | No | | `int` | `{id:int}` | `123456789`, `-123456789` | Yes | | `long` | `{ticks:long}` | `123456789`, `-123456789` | Yes | > [!WARNING] > Route constraints that verify the URL and are converted to a CLR type (such as `int` or `DateTime`) always use the invariant culture. These constraints assume that the URL is non-localizable. ## NavLink component Use a NavLink component in place of HTML **\** elements when creating navigation links. A NavLink 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. The NavMenu component in the [sample app](https://github.com/aspnet/Docs/tree/master/aspnetcore/razor-components/common/samples/) creates a [Bootstrap](https://getbootstrap.com/docs/) nav bar that demonstrates how to use NavLink components. The following markup shows the first two NavLinks in the *Shared/NavMenu.cshtml* file. [!code-cshtml[](common/samples/3.x/BlazorSample/Shared/NavMenu.cshtml?start=13&end=24&highlight=4-6,9-11)] There are two `NavLinkMatch` options: * `NavLinkMatch.All` – Specifies that the NavLink should be active when it matches the entire current URL. * `NavLinkMatch.Prefix` – Specifies that the NavLink should be active when it matches any prefix of the current URL. In the preceding example, the Home NavLink (`href=""`) matches all URLs and always receives the `active` CSS class. The second NavLink only receives the `active` class when the user visits the BlazorRoute component (`href="BlazorRoute"`).