Configure fallback routes

There's a client-side route /products in your front-end application that displays a list of products for your shopping list. When you go to /products in your app by selecting the Products link, your browser's address bar confirms that you're at /products. When you refresh the browser while on this page, you want the app to refresh and display the products once again. However, without a fallback route, you see a 404 error stating the page can't be found.

You see a 404 error when you refresh the page because the browser sends a request to the hosting platform to serve /products. However, there's no page on the server named products to serve.

Fortunately, it's easy to resolve this issue by creating a fallback route. A fallback route is a route that pairs all unmatched page requests to the server.

Configure a fallback route

Azure Static Web Apps supports custom routing rules defined in an optional staticwebapp.config.json file located in the app's source folder. You can define a navigation fallback route in the navigationFallback object. A common fallback route configuration looks like this example.

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

The navigation fallback rule is applied after any other routing rules that appear in the staticwebapp.config.json file.

Route file ___location

The recommended ___location for the staticwebapp.config.json is in the folder set as the app_location in the workflow file. However, the file can be placed in any ___location within your application source code folder.