Terugvalroutes configureren

Voltooid

In uw front-end-toepassing bevindt zich aan de clientzijde een route genaamd /products waarin een lijst met producten voor uw boodschappenlijst wordt weergegeven. Wanneer u naar /products in uw app gaat door de koppeling Producten te selecteren, bevestigt de adresbalk van uw browser dat u zich op /products bevindt. Als u de browser op deze pagina vernieuwt, wilt u dat de app de producten vernieuwt en opnieuw weergeeft. Zonder een terugvalroute ziet u echter een 404-fout waarin staat dat de pagina niet kan worden gevonden.

Bij het vernieuwen van de pagina ziet een 404-fout, omdat de browser een aanvraag naar het hosting-platform stuurt om /products weer te geven. Er is echter geen pagina op de server met de naam producten die moeten worden gebruikt.

Gelukkig is het eenvoudig om dit probleem op te lossen door een terugvalroute te maken. Een terugvalroute is een route die alle niet-overeenkomende paginaaanvragen koppelt aan de server.

Een terugvalroute configureren

Azure Static Web Apps ondersteunt aangepaste routeringsregels die zijn gedefinieerd in een optioneel staticwebapp.config.json bestand in de bronmap van de app. U kunt een terugvalroute voor navigatie definiëren in het navigatie-Fallback-object . Een algemene configuratie van een terugvalroute ziet er als volgt uit.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

Instelling	Weergegeven als	Beschrijving
herschrijven	/index.html	Het bestand dat moet worden gebruikt wanneer een route niet overeenkomt met andere bestanden.
uitsluiten	["/_framework/*", "/css/*"]	Pad(en) om te negeren van terugvalroutering.

De terugvalregel voor navigatie wordt toegepast na andere routeringsregels die worden weergegeven in het staticwebapp.config.json-bestand .

Locatie van routebestand

De aanbevolen locatie voor het staticwebapp.config.json bevindt zich in de map die is ingesteld als het app_location werkstroombestand. Het bestand kan echter op elke locatie in de broncodemap van uw toepassing worden geplaatst.