Configurar rotas de contingência

• 2 minutos

Há uma rota do lado do cliente /products na sua aplicação de front-end que apresenta uma lista de produtos para a sua lista de compras. Quando você acessa /products em seu aplicativo selecionando o link Produtos, a barra de endereço do seu navegador confirma que você está em /products. Quando atualiza o browser enquanto está nesta página, pretende que a aplicação atualize e apresente novamente os produtos. No entanto, sem uma rota de fallback, você verá um erro 404 informando que a página não pode ser encontrada.

Vê um erro 404 quando atualiza a página porque o browser envia um pedido para a plataforma de alojamento para apresentar /products. No entanto, não há nenhuma página no servidor chamada produtos para servir.

Felizmente, é fácil resolver esse problema criando uma rota de fallback. Uma rota de fallback é uma rota que emparelha todas as solicitações de página incomparáveis ao servidor.

Configurar uma rota de contingência

Os Aplicativos Web Estáticos do Azure dão suporte a regras de roteamento personalizadas definidas em um arquivo staticwebapp.config.json opcional localizado na pasta de origem 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/*"]
  }
}

Definição	valor	Description
reescrever	/index.html	O arquivo a ser servido quando uma rota não corresponde a nenhum outro arquivo.
excluir	["/_framework/*", "/css/*"]	Caminho(s) a ser ignorado(s) 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 .

Localização do ficheiro de rota

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