配置回退路由

• 2 分钟

前端应用程序中有一个客户端路由 /products，用于显示购物列表的产品列表。 当你在应用中通过选择“Products”链接来转到 /products 时，浏览器的地址栏将确认你位于 /products。 如果在处于此页面期间刷新浏览器，则你希望应用会刷新并再次显示产品。 但是，在没有回退路由的情况下，你会看到 404 错误，指出找不到页面。

刷新页面时出现 404 错误是因为浏览器向承载平台发送请求以提供 /products。 然而，服务器上没有名为 products 的页面可提供服务。

幸运的是，通过创建回退路由可轻松地解决此问题。 回退路由是将对服务器进行的所有不匹配页面请求进行配对的路由。

配置回退路由

Azure Static Web Apps 支持在可选 staticwebapp.config.json 文件（位于应用的源文件夹中）中定义的自定义传递规则。 可以在 navigationFallback 对象中定义导航回退路由。 常见的回退路由配置如下所示。

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

设置	值	说明
重写	/index.html	要在路由与任何其他文件不匹配时提供的文件。
排除	["/_framework/*", "/css/*"]	要在回退路由中忽略的路径。

在 staticwebapp.config.json 文件中显示的任何其他路由规则之后应用导航回退规则。

路由文件位置

建议将 staticwebapp.config.json 置于工作流文件中设置为 app_location 的文件夹内。 但是，该文件可以放置在应用程序源代码文件夹中的任何位置。