This repository has been archived by the owner on Apr 20, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 123
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
70 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
--- | ||
title: Blazor routing | ||
author: guardrex | ||
description: Learn how to route requests in a client-side Blazor app and about the NavLink component. | ||
manager: wpickett | ||
ms.author: riande | ||
ms.custom: mvc | ||
ms.date: 05/01/2018 | ||
ms.prod: asp.net-core | ||
ms.technology: aspnet | ||
ms.topic: article | ||
uid: client-side/blazor/routing | ||
--- | ||
# Blazor routing | ||
|
||
By [Luke Latham](https://github.com/guardrex) | ||
|
||
[!INCLUDE[](~/includes/blazor-preview-notice.md)] | ||
|
||
Learn how to route requests in a client-side Blazor app and about the NavLink component. | ||
|
||
[View or download sample code](https://github.com/aspnet/Blazor.Docs/tree/master/docs/components/common/samples/) ([how to download](xref:client-side/blazor/index#view-and-download-samples)). See the [Get started](xref:client-side/blazor/get-started) topic for prerequisites. | ||
|
||
## Route templates | ||
|
||
The **<Router>** component enables routing, and a route template is provided to each accessible component. The **<Router>** component appears in the *App.cshtml* file: | ||
|
||
```cshtml | ||
<Router AppAssembly=typeof(Program).Assembly /> | ||
``` | ||
|
||
When a *\*.cshtml* file with an `@page` directive is compiled, the generated class is given a [RouteAttribute](https://docs.microsoft.com/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/Blazor.Docs/tree/master/docs/components/common/samples/), the following component responds to requests for `/BlazorRoute` and `/DifferentBlazorRoute`. | ||
|
||
*Pages/BlazorRoute.cshtml*: | ||
|
||
[!code-cshtml[](components/common/samples/2.x/ComponentsSample/Pages/BlazorRoute.cshtml?start=1&end=4)] | ||
|
||
## Route parameters | ||
|
||
The Blazor client-side router uses route parameters to populate the corresponding component parameters with the same name (case insensitive). | ||
|
||
*Pages/RouteParameter.cshtml*: | ||
|
||
[!code-cshtml[](components/common/samples/2.x/ComponentsSample/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. | ||
|
||
## NavLink component | ||
|
||
Use a NavLink component in place of HTML **\<a>** elements when creating navigation links. A NavLink component behaves like an **\<a>** 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/Blazor.Docs/tree/master/docs/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[](components/common/samples/2.x/ComponentsSample/Shared/NavMenu.cshtml?start=13&end=24&highlight=4-6,9-11)] | ||
|
||
There are two [NavLinkMatch](/api/Microsoft.AspNetCore.Blazor.Routing.NavLinkMatch.html) 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"`). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters