Usar o componente de roteador do Blazor para controlar a navegação no aplicativo
- 5 minutos
O sistema de roteamento do Blazor fornece opções flexíveis para garantir que as solicitações do usuário cheguem a um componente que possa lidar com elas e retornar as informações que o usuário deseja.
Suponha que você esteja trabalhando no site da empresa de entrega de pizza. Você deseja configurar o site para que as solicitações de detalhes da pizza e de cobertura personalizada sejam tratadas pelo mesmo componente. Você concluiu essa fase, mas seu teste mostra que as solicitações de cobertura recebem uma mensagem de erro. Você precisa corrigir esse problema.
Aqui, você aprenderá a configurar rotas no Blazor usando a diretiva @page.
Note
Os blocos de código desta unidade são exemplos ilustrativos. Você escreverá seu próprio código na próxima unidade.
Usar modelos de rota
Quando o usuário faz uma solicitação a uma página do seu aplicativo Web, ele pode especificar o que deseja ver com informações no URI. Por exemplo:
http://www.contoso.com/pizzas/margherita?extratopping=pineapple
Após o protocolo e o endereço do site, esse URI indica que o usuário deseja saber mais sobre pizzas Marguerita. Além disso, a cadeia de consulta após o ponto de interrogação mostra que eles estão interessados em uma cobertura extra de abacaxi. No Blazor, você usa o roteamento para garantir que cada solicitação seja enviada ao componente que pode responder melhor. Você também usa o roteamento para garantir que o componente tenha todas as informações necessárias para exibir o que o usuário deseja. Nesse caso, talvez você queira enviar a solicitação ao componente Pizzas e que esse componente exiba uma pizza margherita com informações sobre como adicionar abacaxi a ela.
O Blazor encaminha solicitações com um componente especializado chamado componente Router. O componente é configurado no App.razor assim:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<p>Sorry, we haven't found any pizzas here.</p>
</NotFound>
</Router>
Quando o aplicativo é iniciado, o Blazor verifica o atributo AppAssembly para descobrir qual assembly ele deve examinar. Ele verifica se há componentes que tenham RouteAttribute presente no assembly. O Blazor usa esses valores para compilar um objeto RouteData que especifica como as solicitações são roteadas para os componentes. Ao codificar o aplicativo, você usará a diretiva @page em cada componente para corrigir o RouteAttribute.
No código anterior, a marca <Found> especifica o componente que trata do roteamento em runtime: o componente RouteView. Esse componente recebe o objeto RouteData e todos os parâmetros do URI ou da cadeia de caracteres de consulta. Em seguida, ele renderiza o componente especificado e seu layout. Você pode usar a marca <Found> para especificar um layout padrão, que será usado quando o componente selecionado não especificar um layout com a diretiva @layout. Você verá mais sobre esses layouts posteriormente neste módulo.
No componente <Router>, você também pode especificar o que é retornado ao usuário quando não há uma rota correspondente usando a marca <NotFound>. O exemplo anterior retorna um só parágrafo <p>, mas você pode renderizar um HTML mais complexo. Por exemplo, ele pode incluir um link para a home page ou uma página de contato para os administradores do site.
Usar a diretiva @page
Em um componente do Blazor, a diretiva @page especifica que o componente deve tratar das solicitações diretamente. Você pode especificar um RouteAttribute na diretiva @page transmitindo-o como uma cadeia de caracteres. Por exemplo, esse atributo especifica que a página lida com as solicitações para a rota /Pizzas:
@page "/Pizzas"
Caso você deseje especificar mais de uma rota para o componente, use duas ou mais diretivas @page, como neste exemplo:
@page "/Pizzas"
@page "/CustomPizzas"
Obter informações de localização e navegar com o NavigationManager
Suponha que você esteja escrevendo um componente para tratar um URI solicitado pelo usuário, como http://www.contoso.com/pizzas/margherita/?extratopping=pineapple.
Ao escrever um componente, talvez você precise ter acesso a informações de navegação, como:
- O URI completo atual, como
http://www.contoso.com/pizzas/margherita?extratopping=pineapple. - O URI base, como
http://www.contoso.com/. - O caminho relativo base, como
pizzas/margherita. - A cadeia de consulta, como
?extratopping=pineapple.
Use um objeto NavigationManager para obter todos esses valores. Você deve injetar o objeto no componente para, em seguida, poder acessar suas propriedades. Este código usa o objeto NavigationManager para obter o URI base do site e usá-lo para definir um link para a home page:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<a href=@HomePageURI>Home Page</a>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
Para acessar a cadeia de caracteres de consulta, você precisa analisar o URI completo. Para executar essa análise, use a classe QueryHelpers do assembly Microsoft.AspNetCore.WebUtilities:
@page "/pizzas"
@using Microsoft.AspNetCore.WebUtilities
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<p>I want to add this topping: @ToppingName</p>
@code {
[Parameter]
public string PizzaName { get; set; }
private string ToppingName { get; set; }
protected override void OnInitialized()
{
var uri = NavManager.ToAbsoluteUri(NavManager.Uri);
if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("extratopping", out var extraTopping))
{
ToppingName = System.Convert.ToString(extraTopping);
}
}
}
Com o componente anterior implantado, se um usuário solicitar o URI http://www.contoso.com/pizzas?extratopping=Pineapple, verá a mensagem "Quero adicionar esta cobertura: abacaxi" na página renderizada.
Você também pode usar o objeto NavigationManager a fim de enviar seus usuários para outro componente no código chamando o método NavigationManager.NavigateTo():
@page "/pizzas/{pizzaname}"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<button class="btn" @onclick="NavigateToPaymentPage">
Buy this pizza!
</button>
@code {
[Parameter]
public string PizzaName { get; set; }
private void NavigateToPaymentPage()
{
NavManager.NavigateTo("buypizza");
}
}
Note
A cadeia de caracteres transmitida para o método NavigateTo() é o URI absoluto ou relativo para o qual você deseja enviar o usuário. Certifique-se de que você tem um componente configurado nesse endereço. No código anterior, um componente com a @page "/buypizza" diretiva manipula essa rota.
Usar componentes NavLink
Em um dos exemplos anteriores, o código foi usado para obter o valor NavigationManager.BaseUri e usá-lo para definir o atributo href de uma tag <a> como a página inicial. No Blazor, use o componente NavLink para renderizar marcas <a> porque ele alterna uma classe CSS active quando o atributo href do link corresponde à URL atual. Ao estilizar a classe active, você poderá deixar claro para o usuário qual link de navegação é para a página atual.
Quando o NavLink é usado, o exemplo de link da home page fica parecido com o seguinte código:
@page "/pizzas"
@inject NavigationManager NavManager
<h1>Buy a Pizza</h1>
<p>I want to order a: @PizzaName</p>
<NavLink href=@HomePageURI Match="NavLinkMatch.All">Home Page</NavLink>
@code {
[Parameter]
public string PizzaName { get; set; }
public string HomePageURI { get; set; }
protected override void OnInitialized()
{
HomePageURI = NavManager.BaseUri;
}
}
O atributo Match no componente NavLink é usado para gerenciar quando o link é realçado. Há duas opções:
- NavLinkMatch.All: quando esse valor é usado, o link só é realçado como o link ativo quando o
hrefcorresponde à URL atual inteira. - NavLinkMatch.Prefix: quando esse valor é usado, o link é realçado como ativo quando o
hrefcorresponde à primeira parte da URL atual. Suponha, por exemplo, que você tenha o link<NavLink href="pizzas" Match="NavLinkMatch.Prefix">. Esse link seria realçado como ativo se a URL atual fossehttp://www.contoso.com/pizzase para qualquer local dentro dessa URL, comohttp://www.contoso.com/pizzas/formaggio. Esse comportamento pode ajudar o usuário a entender qual seção do site está sendo exibida no momento.