React app deployed in firebase has a problem with routing

Question

This is the page I was working on using reactjs(https://orioncruz.site) which is deployed on firebase.

while using a custom url like https://orioncruz.site/casestudy or https://orioncruz.site/process, a firebase message popup.

But I can navigate through the navbar on the site.

This is the link to github https://github.com/70Ni/orizoncruz

on the dev network the header request is always going to https://orioncruz.site/

Answer 1

You need to inform firebase.json that your index.html is single page application (SPA), so your react router will lead from there

firebase.json

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