Configurar rotas de contingência
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.