Posted inFront-End

React App Showing 404 Error on Refresh in Netlify – Complete Fix

Posted inFront-End
React App Showing 404 Error on Refresh in Netlify – How to Fix It
Getting your Trinity Audio player ready...

If your React app works fine during navigation but shows a 404 error on page refresh after deployment on Netlify, this is not a bug — it’s a routing mismatch between React and Netlify.

This guide explains the problem deeply, provides proper fixes, tables, and FAQs to make it fully developer-friendly.

Why Does React App Show 404 Error on Refresh?

React apps usually use client-side routing (via react-router-dom), meaning:

  • Routes like /about, /dashboard, /profile
  • Do NOT exist as real files
  • They are handled entirely inside the browser

When you navigate inside the app, React Router works perfectly.

But when you refresh a page or open a route directly, Netlify’s server receives a request like:

JavaScript
/about

Netlify thinks:

“User is requesting a file named /about”

Since that file does not exist → 404 Error

React Router vs Netlify Server (Comparison)

FeatureReact RouterNetlify Server
Routing TypeClient-sideServer-side
Route Exists as File?❌ No✅ Expected
Handles Refresh❌ No✅ Expects file
Entry Pointindex.htmlPhysical files

👉 This mismatch is the root cause of the 404 error.

Solution: Netlify Rewrite Rule

To fix this, you need to tell Netlify:

“No matter which URL is requested, always serve index.html so React Router can handle the route.”

This is done using a rewrite rule.

Method 1: Using _redirects File (Recommended)

Steps:

  1. Go to your React project
  2. Open the public folder
  3. Create a file named _redirects
  4. Add the following line:
JavaScript
/*  /index.html  200
react-app-showing-404-error-on-refresh-in-netlify-how-to-fix-it

What This Rule Means

PartMeaning
/*Match all routes
/index.htmlServe React entry file
200Rewrite (not redirect)

✅ Ensures React Router handles all routes after page load.

Method 2: Using netlify.toml (Alternative)

Create netlify.toml in the project root:

JavaScript
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

⚠️ Use only one method, not both.

File Placement Rules (Common Mistakes)

FileCorrect Location
_redirectspublic/_redirects
netlify.tomlProject root

❌ _redirects inside src/ → won’t work
❌ Wrong filename → fix fails

After Adding the Fix

  1. Commit changes
  2. Push to GitHub
  3. Trigger a new Netlify deployment
  4. Clear browser cache
  5. Test by refreshing deep routes

Alternative Approach (HashRouter)

JavaScript
import { HashRouter } from "react-router-dom";
  • URL becomes: example.com/#/about
ProsCons
No server config needed❌ SEO-unfriendly
No 404 error❌ Ugly URLs
Quick fix❌ Not professional for production

Recommended only for quick testing, not for production apps.

Official Reference (Netlify)

For official documentation on SPA routing and redirects, visit 👉 Netlify

FAQs

Why does this issue not appear in localhost?

Local dev servers (CRA, Vite, Webpack) automatically fallback to index.html. Netlify does not do this unless configured.

Does this fix work with Vite, CRA, Next.js?

  • Vite – ✅ Yes
  • CRA – ✅ Yes
  • Next.js – ❌ Different setup (uses SSR)

Can I use both _redirects and netlify.toml?

❌ No. Use only one to avoid conflicts.

Where should _redirects be placed?

Inside public/ folder, so it’s included in the build.

What happens if I don’t configure this?

  • Deep links and page refresh will show 404
  • React app works only on root /

Final Thoughts

This is not a React bug, nor a Netlify issue —
it’s simply a routing responsibility mismatch.

Once you understand how SPA routing works, applying the Netlify rewrite fix becomes straightforward and permanent.