react router app hosted on firebase issues 404 error only when trying to access route via address bar

Question

I have a route https://playlists-22855.firebaseapp.com/client/create that when trying to access by clicking on the "Topics" link, I can get to just fine. But when I try to access that route directly by way of the address bar, I get a 404 error. I was wondering how to correct my code, which can be found here on codesandbox. Another funny thing is that the code runs just fine on codesandbox as expected, but there it's a create react app app, whereas mine is not. Thank you.

Answer 1

I had this problem too - I fixed it by configuring my app as a single page app. When you originally did firebase init you could have selected this as an option. Now, you can do that by manually changing your firebase.json file.

You want to add this to your firebase.json

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

so your firebase.json will look something like this

{
  "hosting": {
    "target": "your-app-name",
    "public": "your-build-directory",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}