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.
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>.
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.
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.
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.
Grande Abraço e até o próximo!
Blaze of Code 
Um comentário em “Navegação no Blazor”