Configurar rotas de fallback

  • 2 minutos

Há uma rota /products no lado do cliente em seu aplicativo de front-end que exibe uma lista de produtos para sua lista de compras. Quando você acessa /produtos no seu aplicativo selecionando o link Produtos, a barra de endereços do navegador confirma que você está em /produtos. Ao atualizar o navegador enquanto está nessa página, você deseja que o aplicativo seja atualizado e exiba os produtos novamente. Entretanto, sem uma rota de fallback, você verá um erro 404 informando que a página não pode ser encontrada.

Você verá um erro 404 ao atualizar a página porque o navegador envia uma solicitação para a plataforma de hospedagem para servir /products. Não há nenhuma página no servidor chamada products a ser servida.

Felizmente, é fácil resolver esse problema criando uma rota de fallback. Uma rota de fallback é uma rota que combina todas as solicitações de página não correspondentes ao servidor.

Configurar uma rota de fallback

Os Aplicativos Web Estáticos do Azure dão suporte às as regras de roteamento personalizadas definidas em um arquivo staticwebapp.config.json opcional localizado na pasta de código-fonte do aplicativo. Você pode definir uma rota de fallback de navegação no objeto navigationFallback. Uma configuração de rota de fallback comum se parece com este exemplo.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}
Configuração Valor Descrição
rewrite /index.html O arquivo a ser exibido quando uma rota não corresponde a nenhum outro arquivo.
excluir ["/_framework/*", "/css/*"] Caminhos a serem ignorados do roteamento de fallback.

A regra de fallback de navegação é aplicada após quaisquer outras regras de roteamento que aparecem no arquivo staticwebapp.config.json.

Local do arquivo de rota

O local recomendado para staticwebapp.config.json está na pasta definida como app_location no arquivo de fluxo de trabalho. Entretanto, o arquivo pode ser posicionado em qualquer local da pasta de código-fonte do aplicativo.