Explore como os parâmetros de rota afetam o roteamento do seu aplicativo Blazor

Até agora, neste módulo Blazor, você viu como usar partes do URI para rotear solicitações para o componente certo. Você também pode usar parâmetros de rota para intercetar outras partes do URI e acessá-las em seu código.

Suponha que você esteja trabalhando no site da empresa de entrega de pizza e esteja roteando solicitações de pizza para o componente Pizzas.razor . Agora, você quer obter a pizza favorita do usuário do URI e usá-la para exibir informações sobre outras pizzas que eles possam gostar.

Aqui, você aprende a usar parâmetros de rota para especificar partes da URL a serem processadas em seu código.

Parâmetros de rota

No início deste módulo, você aprendeu como partes do URI que o usuário solicita podem ser usadas para rotear a solicitação para o componente correto. Muitas vezes, você deseja usar outras partes do URI como um valor em sua página renderizada. Por exemplo, suponha que o usuário solicite:

http://www.contoso.com/favoritepizza/hawaiian

Usando a @page diretiva, você viu como rotear essa solicitação para, por exemplo, o componente FavoritePizza.razor . Agora você quer fazer uso do valor havaiano em seu componente. Para obter esse valor, você pode declará-lo como um parâmetro de rota.

Use a @page diretiva para especificar as partes do URI que são passadas para o componente como parâmetros de rota. No código do componente, você pode obter o valor de um parâmetro de rota da mesma forma que obteria o valor de um parâmetro de componente:

@page "/FavoritePizzas/{favorite}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

O código anterior usa chaves na diretiva @page para especificar o parâmetro de rota e atribuir-lhe um nome.

Parâmetros de rota opcionais

No exemplo anterior, o {favorite} parâmetro é obrigatório. Para tornar o parâmetro route opcional, use um ponto de interrogação:

@page "/FavoritePizzas/{favorite?}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
    
    protected override void OnInitialized()
    {
        Favorite ??= "Fiorentina";
    }
}

É uma boa ideia definir um valor padrão para o parâmetro opcional. No exemplo anterior, o valor padrão para o Favorite parâmetro é definido no OnInitialized método.

Restrições de rota

Nos exemplos anteriores, a consequência de solicitar o URI http://www.contoso.com/favoritepizza/2 é a mensagem absurda "Sua pizza favorita é: 2". Em outros casos, incompatibilidades de tipo como essa podem causar uma exceção e exibir um erro para o usuário. Considere especificar um tipo para o parâmetro da rota.

@page "/FavoritePizza/{preferredsize:int}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza size is: @FavoriteSize inches.</p>

@code {
    [Parameter]
    public int FavoriteSize { get; set; }
}

Neste exemplo, se o usuário solicitar http://www.contoso.com/favoritepizza/margherita, não há correspondência com o componente anterior. Como resultado, a solicitação é encaminhada para outro lugar. Se o usuário solicitar http://www.contoso.com/favoritepizza/12, há uma correspondência de rota e o componente exibe a mensagem Seu tamanho de pizza favorito é: 12 polegadas. Um tipo específico fornecido para o parâmetro route como este é chamado de restrição de rota. Pode usar estes outros tipos numa restrição:

Definir um parâmetro de rota genérico

Considere o seguinte componente do início desta unidade:

@page "/FavoritePizza/{favorite}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizza is: @Favorite</p>

@code {
    [Parameter]
    public string Favorite { get; set; }
}

Agora suponha que o usuário tente especificar dois favoritos solicitando o URI http://www.contoso.com/favoritepizza/margherita/hawaiian. A página exibe a mensagem Sua pizza favorita é: margherita e ignora a subpasta havaiana. Você pode alterar esse comportamento usando um parâmetro de rota abrangente, que captura os caminhos através de múltiplos limites de pasta URI (barras inclinadas). Preceda um asterisco (*) ao nome do parâmetro de rota para tornar o parâmetro abrangente.

@page "/FavoritePizza/{*favorites}"

<h1>Choose a Pizza</h1>

<p>Your favorite pizzas are: @Favorites</p>

@code {
    [Parameter]
    public string Favorites { get; set; }
}

Com o mesmo pedido de URI, a página agora exibe a mensagem Suas pizzas favoritas são: margherita/havaiana.