React App Showing 404 Error on Refresh in Netlify – How to Fix It

If you’ve deployed your React app to Netlify and it works fine on the home page but shows a 404 Not Found error when you refresh or directly visit routes like /about, /contact, or any other sub-page — you’re not alone.

This is a common issue for Single Page Applications (SPAs) like React, and the good news is: it’s easy to fix.

✅ Why the 404 Error Happens

React (and other SPA frameworks like Vue or Angular) uses client-side routing, which means the browser handles the routing after loading the initial index.html. But when you refresh the page or go directly to a nested URL like /about, Netlify tries to find a physical file at /about and fails — resulting in a 404 error.

🛠️ How to Fix It Using _redirects File

Netlify supports a special _redirects file that lets you control routing behavior. You can tell Netlify to serve index.html for all paths, so your React router can take over.

✏️ Steps:

1. Go to your React project folder.
2. Find or create the public/ folder.
3. Inside public/, create a new file named: nginxCopyEdit_redirects (Yes, just _redirects with no extension)
4. Add this line to the file: bashCopyEdit/* /index.html 200
5. Save the file.
6. Run the build command: arduinoCopyEditnpm run build
7. Deploy the generated build/ folder to Netlify.

📦 What Does This Line Mean?

plaintextCopyEdit/*    /index.html   200

• /* – Matches all routes.
• /index.html – Redirects them to the index.html file.
• 200 – Indicates success (not a redirect or error).

🚀 Final Result

After making this change and redeploying your site:

• Your home page works ✅
• /about, /contact, and other routes work ✅
• Refreshing on any route works ✅

📌 Conclusion

Netlify doesn’t automatically handle SPA routing out of the box — but with one simple _redirects file, you can fix this issue in minutes.

If you’re building SPAs with React, make sure to include this step in your deployment process.

How I Fixed the “Module Not Found” Error When Deploying a Vite Project on Vercel

Arsalan

Arsalan Malik is a passionate Software Engineer and the Founder of Makemychance.com. A proud CDAC-qualified developer, Arsalan specializes in full-stack web development, with expertise in technologies like Node.js, PHP, WordPress, React, and modern CSS frameworks.

He actively shares his knowledge and insights with the developer community on platforms like Dev.to and engages with professionals worldwide through LinkedIn.

Arsalan believes in building real-world projects that not only solve problems but also educate and empower users. His mission is to make technology simple, accessible, and impactful for everyone.