CODEWITHSUNDEEP
reactjsreact-routerhttp-status-code-404firebase-hostingcustom-error-pages
Dylan L.
Dylan L.

Reputation: 1317

React application built on top of firebase renders 404 on page refresh

We have a React App built on top of firebase. The problem we are facing is if you change the url by navigating to a different page other than the root '/', then refresh the page, it displays a 404 as seen below. But this only happens in production.

404

my firebase.json look like the following:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "functions": {
    "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"]
  }
}

and we are using react-router for navigation.

<Routes>
  <Route path='/' element={<Home />} />
  <Route path='/registration' element={<Registration />} />
  ...       
</Routes>

Upvotes: 0

Views: 509

Answers (1)

Ozeus
Ozeus

Reputation: 191

You will need to include this in your firebase.json.

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

Upvotes: 1

Related Questions