Configurare le route di fallback

Completato

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 che ci si trova 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, verrà restituito un errore 404 indicante che non è stato possibile trovare la pagina.

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. In ogni caso è possibile inserire il file in qualsiasi posizione all'interno della cartella del codice sorgente dell'applicazione.