I deployed my react app on firebase and I can access only route "/" from outside

Question

I deployed my react app on firebase and I can access only route "/" from outside. For better understanding. This is my url: https://clone-2017c.web.app/

If I try to go on https://clone-2017c.web.app/orders, it will return me 404 page from Firebase. But this page exist, it works on localhost and on deployed app to if I access the page from the header link. It send me to the same link, but this time will return my react component.

Do someone know what should I do? It is possible to make it work on Firebase? I have confirmation email, so I'll need to fix it. Thank you!

Answer 1

the solution, then a comment

since you have not specified otherwise, firebase will look for a file with the name of the route. in your firebase.json add this block:

{
  "rewrites": [
      {
          "source": "**",
          "destination": "/index.html"
      }
  ]
}

inside the 'hosting' directive. this tells firebase to send all requests to index.html, where your router will solve the path

now the comment: if possible, avoid using 'real' URL routing on frontend, use #route instead, since URLs are supposed to identify a specific resource, you won't be linking to any specific resource. this would also solve your problem.