Configurer des routes de repli

Effectué

Il existe une route côté client /products dans votre application front-end qui affiche la liste des produits pour votre liste d’achats. Quand vous accédez à /products dans votre application en cliquant sur le lien Produits, la barre d’adresse de votre navigateur confirme que vous êtes dans /products. Quand vous actualisez le navigateur dans cette page, vous voulez que l’application actualise l’affichage et affiche à nouveau les produits. Toutefois, sans itinéraire de secours, une erreur 404 s’affiche indiquant que la page est introuvable.

Une erreur 404 s’affiche lorsque vous actualisez la page, car le navigateur envoie une demande à la plateforme d’hébergement pour desservir /products. Il n’existe néanmoins aucune page nommée products sur le serveur à desservir.

Heureusement, il est facile de résoudre ce problème en créant un itinéraire de secours. Une route de repli est une route qui appaire toutes les demandes de page sans correspondance au serveur.

Configurer une route de repli

Azure Static Web Apps prend en charge les règles de routage personnalisées définies dans un fichier facultatif nommé staticwebapp.config.json situé dans le dossier source de l’application. Vous pouvez définir une route de repli de navigation dans l’objet navigationFallback. Une configuration courante d’itinéraire de secours ressemble à cet exemple.

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

Paramètre	valeur	Description
réécrire	/index.html	Fichier à desservir quand un itinéraire ne correspond à aucun autre fichier.
exclure	["/_framework/*", "/css/*"]	Chemin(s) à ignorer dans le routage de repli.

La règle de repli de navigation est appliquée après toutes les autres règles de routage qui figurent dans le fichier staticwebapp.config.json.

Emplacement du fichier de routes

L’emplacement recommandé pour le fichier staticwebapp.config.json est le dossier défini comme app_location dans le fichier de workflow. Toutefois, le fichier peut être placé à n’importe quel emplacement dans le dossier de code source de votre application.