Navegação no Blazor

Nesse outro artigo aqui, nós já falamos sobre como o sistema de Rotas do Blazor funciona. Agora vamos entender como navegar pelas rotas de uma aplicação Blazor.

NavLink

O NavLink é um componente nativo do Blazor que devemos usar para criar links HTML em nossos componentes. Devemos utilizar a tag <NavLink> em vez da tag <a>, sempre que quisermos criar links para outras rotas da nossa aplicação.

Na aplicação de exemplo temos um componente na pasta Shared, chamado NavMenu.razor. Nesse componente é montado um Menu de Navegação, todo baseado no NavLink. Veja a Figura 1.

Figura 1: Exemplo de uso do NavLink

Você pode estilizar o NavLink da forma que desejar, nesse exemplo ele é estilizado para parecer como um item de menu.

O NavLink aponta para a rota à qual ele deverá navegar quando clicado. Isso é feito pelo atributo href. Basta indicar no href o nome da rota que o link será devidamente criado.

Se você executar a aplicação, verá que o menu lateral navega para o componente desejado, porém isso ocorre sem nenhuma requisição ao servidor. Tudo ocorre local como em uma aplicação SPA (Single Page Application).

Veja na Figura 2, que ao inspecionar o NavLink no menu, o HTML que o componente gerou é uma simples tag <a>.

Figura 2: Como o NavLink é renderizado

NavLink active

Uma outra coisa que você pode observar no HTML da Figura 2, é que quando clicamos no NavLink, ele modifica o CSS do elemento, adicionando a classe active.

Com isso, no caso do Menu de navegação, podemos ver que o estilo aplicado destaca o item que foi clicado, para mostrar ao usuário qual é o item do Menu que está selecionado no momento.

Adicionalmente, o NavLink possuí um parâmetro chamado Match. Esse parâmetro serve para definir se a classe active será aplicada quando o href combinar inteiramente com a URL (NavLinkMatch.All), ou quando combinar com qualquer prefixo da URL corrente (NavLinkMatch.Prefix).

IUriHelper.NavigateTo

O NavLink resolve o problema de navegação com relação à links diretos para as rotas. Porém, existem algumas situações onde você precisa realizar uma navegação dentro de um trecho de código.

Para resolver essa situação usamos o método NavigateTo do serviço IUriHelper. O IUriHelper é um daqueles serviços que o Blazor registra automaticamente no seu Injetor de Dependências.

Para utilizá-lo em um componente, basta injetar o serviço como mostra a Figura 3. Como você pode ver, estamos injetando o serviço IUriHelper em uma propriedade chamada UriHelper do componente Counter.razor.

Figura 3: Injetando Serviço IUriHelper no Componente Counter.razor

Nesse componente Counter.razor, temos um método chamado IncrementCount que adiciona 1 ao contador que é exibido no HTML do componente.

Para exemplificar o uso do IUriHelper.NavigateTo, vamos criar uma regra nesse método, que forçará uma navegação ao componente FetchData.razor, sempre que o contador chegar em 10. Veja como fica isso na Figura 4.

Figura 4: Navegação com o IUriHelper.NavigateTo()

Execute a sua aplicação e faça um teste. Abra a página Counter e clique no botão Click Me até que o contador chegue em 10. Como você pode ver na Figura 5, quando o contador chegar em 10, ocorrerá uma navegação ao componente FetchData.

Figura 5: Testando a Navegação com o IUriHelper.NavigateTo()

Grande Abraço e até o próximo!

Um comentário em “Navegação no Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s