0

I have just noticed that in my react app the urls don't work when user refreshes the page. The weird things is that locally everything works fine. I have created the app using create-react-app. I was reading the React-router urls don't work when refreshing or writing manually but since the build process is run automatically through github actions it is not clear how to solve this. Can anyone suggest a quick solution?

Jim
  • 2,760
  • 8
  • 42
  • 66
  • check if this helps: https://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files – Thiago Custodio Sep 27 '21 at 14:15
  • sorry, not sure how the above solve this problem. – Jim Sep 27 '21 at 14:17
  • it's a cache problem, you need to force users to download the latest version of JS file using one of the solutions from the link I've shared – Thiago Custodio Sep 27 '21 at 14:22
  • I am not sure if I am explaning it properly, but the issue is that if for example, within the app user navigates to domain.com/login the page shows correctly. However, if he hits the refresh button, the 404 is shown from azure. It is not clear therefore how the cashing is thte problem – Jim Sep 27 '21 at 14:32
  • 1
    I see, it's a different problem then. https://stackoverflow.com/questions/43052520/azure-webapplication-return-404-when-try-to-access-using-the-address-bar-or-refr – Thiago Custodio Sep 27 '21 at 14:42

3 Answers3

4

The answer to the problem is fallbackroutes found on this page https://learn.microsoft.com/en-us/azure/static-web-apps/configuration. Add staticwebapp.config.json at the root folder of your react app with the below content and push to git:

{
  "navigationFallback": {
   "rewrite": "/index.html"
  }
}
Jim
  • 2,760
  • 8
  • 42
  • 66
2

I had the same problem with GitHub pages and this is because the routes don't exist on the server and are handled by the frontend router.

I solved it by replacing the 404 page with my index.html. The index.html will load in react-router which in turn will handle the routing.

You could try to replace or redirect the Azure 404 page to your index.html.

justpen
  • 178
  • 1
  • 11
1

Add this file

routes.json

with the below code

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}
Dhanushka Rukshan
  • 417
  • 5
  • 15