DEV Community

Alex Aslam
Alex Aslam

Posted on

SPA Routing 404s: Taming the “Page Not Found” Monster with `_redirects` & Server Magic 🧙♂️🚫

#webdev #programming #javascript #automation

You just deployed your shiny new React/Vue/Angular app. It works perfectly locally. But the moment you share the link, chaos: users report 404 errors on every route except /. Your SEO dreams crumble. Google’s bots are lost. Your SPA feels more like a SPA-ghetti mess.

Don’t panic! Let’s fix those 404s and turn your routing woes into a smooth, server-defying joyride.

Why SPAs Break the Internet (Or: The 404 Curse)

SPAs handle routing client-side. That means:

  • Your server only knows about index.html.
  • Routes like /about or /profile? The server goes “???” and throws a 404.

Translation: Your server is like a confused librarian—it only knows one book (index.html). When someone asks for chapter 5 (/contact), it shrugs.

The Fix: Teach Your Server to Redirect Like a Pro

You need to tell your server: “Hey, for any unknown path, just serve index.html!” Here’s how:

Method 1: The _redirects File (Static Host Hero) 📄

For hosts like Netlify, Vercel, or GitHub Pages:

  1. Create a _redirects (or _redirects) file in your build folder: 
   /* /index.html 200
Enter fullscreen mode Exit fullscreen mode
  • /* = Catch all paths.
  • /index.html = Serve this file.
  • 200 = Return OK status (not 404!).

Platform-Specific Tweaks:

  • Netlify: Also supports a netlify.toml: 
  [[redirects]]  
    from = "/*"  
    to = "/index.html"  
    status = 200
Enter fullscreen mode Exit fullscreen mode
  • Vercel: Use vercel.json: 
  {  
    "routes": [{ "handle": "filesystem" }, { "src": "/.*", "dest": "/index.html" }]  
  }
Enter fullscreen mode Exit fullscreen mode
  • Firebase: firebase.json: 
  "hosting": {  
    "rewrites": [{ "source": "**", "destination": "/index.html" }]  
  }
Enter fullscreen mode Exit fullscreen mode

Method 2: Server Configuration (For the DIY Crowd) ⚙️

For custom servers (Apache, Nginx, Express, etc.):

Apache

Add to .htaccess:

<IfModule mod_rewrite.c>  
  RewriteEngine On  
  RewriteBase /  
  RewriteRule ^index\.html$ - [L]  
  RewriteCond %{REQUEST_FILENAME} !-f  
  RewriteCond %{REQUEST_FILENAME} !-d  
  RewriteRule . /index.html [L]  
</IfModule>
Enter fullscreen mode Exit fullscreen mode

Nginx

Update nginx.conf:

location / {  
  try_files $uri $uri/ /index.html;  
}
Enter fullscreen mode Exit fullscreen mode

Express.js

Add a catch-all route:

app.get('*', (req, res) => {  
  res.sendFile(path.join(__dirname, 'build', 'index.html'));  
});
Enter fullscreen mode Exit fullscreen mode

Pro Tips to Avoid Facepalms 🤦♀️

  • Test Redirects Locally: Use serve or http-server to mimic production.
  • Cache Busting: Force clients to reload after updates (e.g., ?v=2 in asset URLs).
  • Hash vs. History Mode:
    • Vue Router: Use history: createWebHistory() + server config.
    • React Router: Ensure <BrowserRouter> is set up.

Real-World Save: Startup X’s SEO Comeback

A Next.js app kept 404-ing on /blog after deployment. They:

  1. Added a _redirects file.
  2. Pre-rendered key pages for SEO.
  3. Result: Traffic jumped 200% in a month.

Pitfalls to Dodge

  • Ignoring Trailing Slashes: /about vs. /about/—pick one and redirect.
  • Overcaching: CDNs might cache the 404 page. Clear caches post-deploy!
  • Forgetting the 404 Page: Still add a custom 404.html for direct invalid URLs.

TL;DR:

  • Static Hosts: Use _redirects or platform configs.
  • Custom Servers: Apache/Nginx/Express rewrites.
  • Test Ruthlessly: Because 404s will haunt you otherwise.

Your Move:

Pick your hosting platform, add the config, and banish 404s forever.

Tag the dev whose app is stuck in 404 purgatory. They need this.

Got a routing horror story or pro tip? Share below! Let’s commiserate. 💬

Top comments (0)