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

Question

So 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 a 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.

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.

Anyone knows what's going on?

Answer 1

Hi Piotr Piątkiewicz ,

Welcome to the Microsoft Q&A Platform!
The issue due to because Azure Storage static websites do not support client-side routing out of the box. When you click a link that routes to a path like /car/eleanor, the browser requests that specific path from the server. However, the server looks for a physical file at that path and returns a 404 error because no such file exists.
So you need to Redirect All Routes to index.html

1. Configure Azure Storage Static Website for Routing.
2. Go to the Azure Storage account.
3. Under Static website settings, set>Index document name index.html>Error document path index.html.
4. This ensures any non-existent paths are redirected to index.html, enabling client-side routing.
5. Add a web.config File >Place the following web.config in the root of your build folder.

      <configuration>
        <system.webServer>
          <rewrite>
            <rules>
              <rule name="React Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="index.html" />
              </rule>
            </rules>
          </rewrite>
        </system.webServer>
      </configuration>
      
   

6. For AFD Configure a rewrite rule to redirect 404 errors to index.html
   https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
   If the answer is helpful, please click "Accept Answer" and kindly upvote it.