Konfigurieren von Fallbackrouten

  • 2 Minuten

In Ihrer Front-End-Anwendung gibt es eine clientseitige Route /products; hier wird eine Liste von Produkten für Ihre Einkaufsliste angezeigt. Wenn Sie in Ihrer App zu /products navigieren, indem Sie den Link Produkte auswählen, wird in der Adressleiste des Browsers bestätigt, dass Sie sich auf /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.

Der Fehler 404 wird beim Aktualisieren der Seite angezeigt, da der Browser eine Anforderung zum Bereitstellen von /products an die Hostingplattform sendet. Auf dem Server ist jedoch keine Seite mit dem Namen products vorhanden.

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 Datei staticwebapp.config.json im Quellordner der App definiert sind. Sie können eine Navigationsfallbackroute im Objekt navigationFallback definieren. Eine gängige Konfiguration für eine Fallbackroute wird in diesem Beispiel gezeigt.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}
Einstellung Wert Beschreibung
rewrite /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 Navigationsfallbackregel wird nach allen anderen Routingregeln angewendet, die in der Datei staticwebapp.config.json angezeigt werden.

Speicherort der Datei „routes“

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