設定後援路由

  • 2 分鐘

您的前端應用程式中有一個用戶端路由 /products，其會針對您的購物清單顯示產品清單。 當您選取 [產品] 連結，前往您應用程式內的 /products 後，您可以在瀏覽器的網址列確認您位在 /products 目錄之中。 當您在此頁面上重新整理瀏覽器時，您希望應用程式重新整理並再次顯示產品。 不過，如果沒有後援路由，您會看到 404 錯誤，指出找不到該頁面。

您會在重新整理頁面時看到 404 錯誤，這是因為瀏覽器會將要求傳送到裝載平台以提供 /products。 不過，伺服器上沒有名為 products 的頁面。

幸好，您可以藉由建立後援路由，輕鬆解決此問題。 後援路由是一種路由，可將所有不相符的頁面要求與伺服器進行配對。

設定後援路由

Azure Static Web Apps 支援自訂路由規則，這類規則定義於位於應用程式來源資料夾的選擇性 staticwebapp.config.json 檔案中。 您可以在 navigationFallback 物件中定義導覽後援路由。 常見的後援路由設定看起來像這個範例。

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}
設定 值 Description
重寫 /index.html 當路由不符合任何其他檔案時要提供的檔案。
排除 ["/_framework/*", "/css/*"] 要從後援路由中略過的路徑。

導覽後援規則會套用在出現在 staticwebapp.config.json 檔案中的任何其他路由規則後面。

路由檔案位置

staticwebapp.config.json 的建議位置，是在設為工作流程檔案中的 app_location 資料夾中。 然而，檔案可能會放在應用程式原始程式碼資料夾中的任何位置。