Rotas no Blazor

Vamos explorar nesse artigo as funcionalidades de Rotas que temos em uma aplicação Blazor. Nesse artigo vamos utilizar uma aplicação Blazor já existente. Qualquer dúvida dê uma olhada nesse artigo, que mostra como criar um novo projeto Blazor usando o template do Visual Studio.

<Router>

As rotas de uma aplicação Blazor são configuradas pelo componente <Router>, que é nativo do Blazor. Esse componente aparece originalmente dentro do componente App.razor. Dê uma olhada na Figura 1.

Figura 1: Componente Router declarado no App.razor

Note que o componente Router tem uma propriedade chamada AppAssembly, que aponta para o Assembly da própria aplicação. Isso é feito através do type da classe Program.

Esse componente Router serve para dizer à aplicação que iremos utilizar o sistema de rotas, e que as rotas devem ser registradas olhando para todos os componentes que fizerem parte do Assembly informado.

@page

Quando criamos um componente Blazor, podemos usar a diretiva @page para declarar a Rota para a qual esse componente irá responder. Na aplicação de exemplo nós temos três componentes na pasta Pages. Veja na Solution Explorer da Figura 2.

Figura 2: Componentes da Aplicação de Exemplo

Cada um desses componentes tem um @page declarado, veja o exemplo do componente Counter, aqui na Figura 3.

Figura 3: Definição da Rota do Template Counter

Isso significa que o componente Counter será renderizado toda vez o browser requisitar a URL /counter para a aplicação. Execute a aplicação e veja o resultado. Figura 4.

Figura 4: Exemplo de como a Rota é interpretada pelo Browser

Um único componente pode responder à diferentes templates de rotas, basta repetir a diretiva @page com a rota alternativa, como mostra a Figura 5. Você pode configurar quantas rotas quiser para o seu Componente.

Figura 5: Registrando 2 rotas para o mesmo Componente

Parâmetros de Rotas

Nós podemos passar parâmetros para uma rota. Esses parâmetros são diretamente atribuídos à propriedades do componente. Veja o Componente Counter modificado para receber um parâmetro, na Figura 6.

Figura 6: Componente Counter modificado para receber parâmetro na rota

Veja que o parâmetro {incremento:int} é declarado no template da rota. Um parâmetro deve ser declarado entre chaves, com seu nome e tipo, separados por dois pontos.

O nome do parâmetro deve bater com o nome de uma Propriedade do componente. Esse “match” não é case-sensitive, o que permite definir o parâmetro todo em minúsculo, e a propriedade com a primeira letra em maiúsculo.

Note que a propriedade Incremento precisa ser decorada com o atributo [Parameter]. Isso é necessário para que a propriedade seja realmente alimentada pelo parâmetro da rota. Também é necessário que a propriedade seja do mesmo tipo do parâmetro.

Nesse exemplo estamos aproveitando o parâmetro incremento, para utilizá-lo como valor do incremento realizado quando o usuário clicar no botão. Faça um teste e veja o resultado no browser. Figura 7.

Figura 7: Exemplo de Rota com parâmetro

Veja que quando passamos o parâmetro 10 para o componente Contador, ao clicarmos no botão o valor é sempre incrementado em 10, respeitando a propriedade Incremento que foi alimentada pelo parâmetro.

NotFoundContent

Um recurso interessante do componente Router é o NotFoundContent. Com ele, podemos definir o que o aplicativo deve apresentar quando o usuário requisitar uma URL que não satisfaça nenhuma das rotas existentes na aplicação.

Se você conferir a Figura 1 lá no início do artigo, verá que esse recurso já vem configurado por padrão. Faça um teste e tente acessar uma rota que não existe, e veja o resultado na Figura 8.

Figura 8: NotFoundContent

Conclusão

Isso é o básico que você precisa saber sobre Rotas no Blazor. No próximo artigo vamos falar sobre como funciona a Injeção de Dependência.

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

Publicidade