Best Way to Fix Netlify Routing Error for React or Vite Apps

Introduction

When you deploy a React or Vite single-page application (SPA) on Netlify, you might face a common problem: internal routes like /about or /dashboard show a 404 Page Not Found error. This happens because Netlify tries to find those pages as real files.

Why the Error Happens

Netlify’s default behavior is to serve static files. When it doesn’t find a file or folder that matches your route, it returns a 404. But in SPAs, routing is handled on the client side, not by the server — so we need to tell Netlify to always serve index.html instead.

The Fix: Using a _redirects File

The simplest and most effective fix is to add a special _redirects file inside your project. This tells Netlify to redirect all routes to your main index.html.

/*    /index.html   200

This line means: “For any route, serve index.html with a 200 OK status.” Netlify then lets your React Router or Vite Router handle the navigation.

Where to Place the _redirects File

You should place the _redirects file inside the public/ folder, not manually in the build output. During the build process, Netlify automatically copies it to the dist/ (for Vite) or build/ (for Create React App) directory.

my-app/
 ├─ public/
 │   └─ _redirects
 ├─ src/
 ├─ dist/ (auto-generated)
 │   ├─ index.html
 │   └─ _redirects (copied automatically)
    

After placing it in public/ and running your build command, the file will be included automatically in the final output folder. Redeploy your site, and all internal routes will now work perfectly.

Bonus: Add a Custom 404 Page

For a better user experience, you can also add a 404.html file inside your public/ folder. Netlify will serve this page when no matching static file is found.

Conclusion

That’s it — just one simple line in a _redirects file placed in your public/ folder can save you hours of debugging. It ensures smooth client-side routing for any React, Vite, or other SPA hosted on Netlify. Clean, simple, and production-ready!