Fixing 404 Errors on Page Refresh in Lovable SPAs

Why 404 errors appear on page refresh in Lovable single-page apps

Lovable builds single-page applications (SPAs) where React Router handles all navigation on the client side. When you click a link in your app to go from / to /dashboard, React Router updates the URL and swaps the page component without making a server request. This works perfectly. The problem occurs when the user refreshes the browser or navigates directly to a URL like /dashboard by typing it in the address bar. The browser sends a request to the hosting server asking for a /dashboard file. Since your app is a single HTML file (index.html) with JavaScript-based routing, there is no /dashboard file on the server. The server returns a 404 error. The solution is a server-side fallback rule that tells the hosting platform: 'If you cannot find a matching file, serve index.html instead.' Once index.html loads, React Router reads the URL, matches it to the correct route, and renders the right page. This is a hosting configuration issue, not a code issue — your React Router setup is likely correct, and the fix is a one-line configuration change on your hosting platform.

• No SPA fallback rule configured on the hosting platform — the server looks for files that do not exist
• The _redirects or vercel.json file was not included in the build output (placed outside /public or not committed to GitHub)
• Hosting platform auto-detected wrong framework settings and overrode the SPA configuration
• Using a static file server (like S3 or Nginx) without configuring a catch-all route to index.html

Error messages you might see

Before you start

• A Lovable project deployed to an external hosting platform (Vercel, Netlify, Cloudflare Pages, etc.)
• GitHub integration enabled (so configuration files sync to the hosting platform)
• The app works correctly in Lovable's preview panel — the 404 only occurs on the hosted version

How to fix it

// No vercel.json exists
// Direct navigation to /dashboard returns Vercel's 404 page

// vercel.json in project root
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

// No _redirects file in /public
// Direct navigation to /about returns Netlify's 404 page

// public/_redirects (plain text file, no extension)
/*    /index.html   200

// Nginx default config — returns 404 for SPA routes
location / {
    root /var/www/dist;
}

// Nginx with SPA fallback — serves index.html for all routes
location / {
    root /var/www/dist;
    try_files $uri $uri/ /index.html;
}

Complete code example

1{
2  "rewrites": [
3    {
4      "source": "/(.*)",
5      "destination": "/index.html"
6    }
7  ],
8  "headers": [
9    {
10      "source": "/assets/(.*)",
11      "headers": [
12        {
13          "key": "Cache-Control",
14          "value": "public, max-age=31536000, immutable"
15        }
16      ]
17    },
18    {
19      "source": "/(.*)",
20      "headers": [
21        {
22          "key": "X-Content-Type-Options",
23          "value": "nosniff"
24        }
25      ]
26    }
27  ]
28}

Best practices to prevent this

• Add SPA fallback routing before your first deployment, not after — it prevents the most common hosting issue entirely
• Place _redirects in /public (not project root) so Vite copies it to the dist/ build output
• Place vercel.json in the project root (alongside package.json) where Vercel reads it before the build
• Test your deployment by navigating directly to a deep route URL (like /dashboard/settings) to confirm the fallback works
• Add a catch-all route in React Router (path="*") that renders a custom 404 component for routes your app does not handle
• If your app has both SPA routes and API endpoints, make sure the fallback rule does not override API routes
• After adding the configuration file, trigger a new deployment — most hosting platforms do not retroactively apply config changes

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns