Konfigurieren von Fallbackrouten

  • 2 Minuten

Es gibt eine Route auf der Client-Seite /Produkte in Ihrer Front-End-Anwendung, die eine Produktliste für Ihren Einkaufszettel anzeigt. Wenn Sie zu /products in Ihrer App wechseln, indem Sie den Link " Produkte " auswählen, bestätigt die Adressleiste Ihres Browsers, dass Sie sich bei /products befinden. Wenn Sie den Browser auf dieser Seite aktualisieren, soll die App aktualisiert werden, und die Produkte sollen wieder angezeigt werden. Ohne eine Fallbackroute wird jedoch der Fehler 404 angezeigt, der besagt, dass die Seite nicht gefunden wurde.

Beim Aktualisieren der Seite wird ein 404-Fehler angezeigt, da der Browser eine Anforderung an die Hostingplattform sendet, um /products bereitzustellen. Es gibt jedoch keine Seite auf dem Server namens products, die bereitgestellt werden kann.

Glücklicherweise kann dieses Problem einfach durch Erstellen einer Fallbackroute behoben werden. Eine Fallbackroute ist eine Route, die allen Seitenanforderungen ohne Übereinstimmung an den Server entspricht.

Konfigurieren einer Fallbackroute

Azure Static Web Apps unterstützt benutzerdefinierte Routingregeln, die in einer optionalen staticwebapp.config.json Datei definiert sind, die sich im Quellordner der App befindet. Sie können eine Fallbackroute für die Navigation im NavigationFallback-Objekt definieren. Eine gängige Konfiguration für eine Fallbackroute wird in diesem Beispiel gezeigt.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}
Einstellung Wert Beschreibung
umschreiben /index.html Dies ist die bereitzustellende Datei, wenn eine Route mit keiner anderen Datei übereinstimmt.
Ausschließen ["/_framework/*", "/css/*"] Pfade, die vom Fallbackrouting ignoriert werden sollen.

Die Fallbackregel für die Navigation wird nach allen anderen Routingregeln angewendet, die in der staticwebapp.config.json Datei angezeigt werden.

Speicherort der Datei „routes“

Der empfohlene Speicherort für die staticwebapp.config.json befindet sich im Ordner, der in app_location der Workflowdatei festgelegt ist. Sie können die Datei jedoch an einem beliebigen Ort innerhalb des Quellcode-Ordners Ihrer Anwendung ablegen.