"The requested content does not exist" on routes other than / - React app as Static Website

Question

The React app I created works fine locally. Then I created a storage account, enabled static website, and deployed build folder to $web. And it works on first sight, but when I click anything that goes to another route, like /car/eleanor it shows the error "The requested content does not exist."

Copilot told me to create web.config or staticwebapp config.json and put it in public catalog, but it doesn't work, same error.

I'm accessing the page at storage account address at ...z36.web.core.windows.net, didn't configure CDN/FrontDoor. I mean I configured, but it shows the same error from AFD url.

I found in another post on SO a comment with an advice to set index.html as error endpoint, but it doesn't sound like the right approach.

Edit: I found that access level for $web should not be "private" like I had. I just changed it to "Blob" or "Container", but it's still the same.

Edit2: Storage Acccount settings:

Edit3: I disabled the static website, then enabled again and for few seconds the error appeared even on the main page, but then the problem is the same, only main page works.

Does anyone know what's going on?

Answer 1

when I click anything that goes to another route, like /car/eleanor it shows the error "The requested content does not exist."

According to this MS-Document,

• Azure Blob Storage's static website feature is designed to serve static files (e.g., HTML, CSS, JS) directly from the $web container.
• When you navigate to a route like /car/eleanor, Azure tries to find a file in the $web container with the exact path /car/eleanor if it is not there will get an error.

Solution with setting index.html as Error Page works, but would be helpful to see some explanation

• Azure Blob Storage serves files directly and does not have the concept of a catch-all route for single-page applications (SPAs) like React apps.
• By setting index.html as the error document path, Azure serves index.html whenever a 404 error occurs. This is crucial for SPAs because all routes are typically handled on the client side by JavaScript.
• In React (using BrowserRouter), routing is managed in the browser, not on the server. When index.html is served for an unknown route (e.g., /car/eleanor), React's routing logic parses the URL and determines the appropriate component to render.

So that why setting Index.html as Error Page works same like yours in my environment.

In my environment, I tried with sample with my path is sample/test and with one jpg file.

Portal: