Configurare le route di fallback

  • 2 minuti

Nell'applicazione front-end è presente una route lato client /products che visualizza un elenco di prodotti per la lista della spesa. Quando si passa a /products nell'app selezionando il collegamento Prodotti , la barra degli indirizzi del browser conferma di essere in /products. Quando si aggiorna il browser mentre ci si trova in questa pagina, l'app deve essere aggiornata e visualizzare di nuovo i prodotti. Tuttavia, senza una route di fallback, viene visualizzato un errore 404 che informa che la pagina non è stata trovata.

L'errore 404 viene generato quando si aggiorna la pagina perché il browser invia una richiesta alla piattaforma di hosting per la visualizzazione di /products. Nel server non è tuttavia presente alcuna pagina denominata products da rendere disponibile.

Fortunatamente, è facile risolvere questo problema creando una route di fallback. Una route di fallback è una route che associa tutte le richieste di pagina non corrispondenti al server.

Configurare una route di fallback

App Web statiche di Azure supporta regole di gestione personalizzate definite in un file staticwebapp.config.json facoltativo contenuto nella cartella di origine dell'app. È possibile definire una route di fallback di navigazione nell'oggetto navigationFallback. Una configurazione di route di fallback comune ha un aspetto analogo a questo esempio.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}
Impostazione valore Descrizione
riscrivere /index.html File da rendere disponibile quando una route non corrisponde ad altri file.
escludere ["/_framework/*", "/css/*"] Percorso/i che il routing di fallback deve ignorare.

La regola di fallback di navigazione viene applicata dopo qualsiasi altra regola di gestione visualizzata nel file staticwebapp.config.json.

Percorso del file della route

Il percorso consigliato per staticwebapp.config.json è nella cartella impostata come app_location nel file del flusso di lavoro. Tuttavia, il file può essere inserito in qualsiasi posizione all'interno della cartella del codice sorgente dell'applicazione.