Creating and Customizing 404 Pages in Lovable Projects

Why Lovable apps show a blank page for unknown URLs

Lovable generates single-page applications (SPAs) with React Router for client-side navigation. When a user visits a URL that does not match any defined route, React Router has nothing to render, so the page goes blank. There is no built-in fallback page unless you explicitly create one. This is different from traditional websites where the server returns a 404 HTML page. In a Lovable SPA, the server always returns index.html (that is what SPA fallback routing does), and then React Router decides what to display based on the URL path. If no route matches, nothing renders. A blank page is worse than a proper 404 message because users assume the app is broken. A well-designed 404 page tells users the page does not exist, offers a link back to the home page, and optionally suggests related pages. This improves user experience and reduces bounce rates.

• No catch-all route (path="*") defined in your React Router configuration
• The catch-all route exists but renders an empty or broken component
• Routes are nested incorrectly so some paths fall outside the router's scope
• SPA fallback not configured on the hosting platform, causing server-level 404s instead of loading the app

Error messages you might see

Before you start

• A Lovable project with React Router already set up (most Lovable projects include this by default)
• At least one working route in your app (like a home page)
• Access to the Lovable editor to modify route configuration and create a new component

How to fix it

// No NotFound component exists

import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
const NotFound = () => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background">
      <div className="text-center space-y-6 p-8">
        <h1 className="text-6xl font-bold text-muted-foreground">404</h1>
        <h2 className="text-2xl font-semibold">Page not found</h2>
        <p className="text-muted-foreground max-w-md">
          The page you are looking for does not exist or has been moved.
        </p>
        <Button asChild>
          <Link to="/">Back to Home</Link>
        </Button>
      </div>
    </div>
  );
};
export default NotFound;

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

import NotFound from "@/pages/NotFound";
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />} />
  {/* Catch-all route — must be last */}
  <Route path="*" element={<NotFound />} />
</Routes>

<Button asChild>
  <Link to="/">Back to Home</Link>
</Button>

<div className="space-y-4">
  <Button asChild>
    <Link to="/">Back to Home</Link>
  </Button>
  <div className="space-y-2">
    <p className="text-sm text-muted-foreground">Or try one of these:</p>
    <div className="flex gap-2 justify-center">
      <Button variant="outline" size="sm" asChild>
        <Link to="/dashboard">Dashboard</Link>
      </Button>
      <Button variant="outline" size="sm" asChild>
        <Link to="/about">About</Link>
      </Button>
    </div>
  </div>
</div>

// No SPA fallback configured on hosting platform

// vercel.json (for Vercel deployments)
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}
// public/_redirects (for Netlify deployments)
// Content: /* /index.html 200

Complete code example

1import { useEffect, useState } from "react";
2import { Link, useNavigate } from "react-router-dom";
3import { Button } from "@/components/ui/button";
4
5const NotFound = () => {
6  const navigate = useNavigate();
7  const [countdown, setCountdown] = useState(15);
8
9  // Auto-redirect to home after 15 seconds
10  useEffect(() => {
11    const timer = setInterval(() => {
12      setCountdown((prev) => {
13        if (prev <= 1) {
14          clearInterval(timer);
15          navigate("/");
16          return 0;
17        }
18        return prev - 1;
19      });
20    }, 1000);
21
22    return () => clearInterval(timer);
23  }, [navigate]);
24
25  return (
26    <div className="min-h-screen flex items-center justify-center bg-background">
27      <div className="text-center space-y-6 p-8 max-w-lg">
28        <h1 className="text-7xl font-bold text-muted-foreground">404</h1>
29        <h2 className="text-2xl font-semibold">Page not found</h2>
30        <p className="text-muted-foreground">
31          The page you are looking for does not exist or has been moved.
32          Redirecting to home in {countdown} seconds.
33        </p>
34        <div className="flex flex-col sm:flex-row gap-3 justify-center">
35          <Button asChild>
36            <Link to="/">Back to Home</Link>
37          </Button>
38          <Button variant="outline" asChild>
39            <Link to="/dashboard">Go to Dashboard</Link>
40          </Button>
41        </div>
42      </div>
43    </div>
44  );
45};
46
47export default NotFound;

Best practices to prevent this

• Always place the catch-all route (path="*") as the last Route inside your Routes block so specific routes match first
• Use a friendly, non-technical tone on your 404 page — avoid showing stack traces or error codes to end users
• Include at least one navigation link (preferably to the home page) so users can recover without using the back button
• Match the 404 page design to your app's theme using the same Tailwind classes and shadcn/ui components
• Consider adding an auto-redirect with a visible countdown — it guides lost users back to a working page automatically
• Test the 404 page by visiting a random URL path in the Lovable preview to make sure it renders correctly
• If deploying outside lovable.app, always configure SPA fallback routing on your hosting platform
• Log 404 hits to analytics so you can identify broken links or common misspelled URLs

Still stuck?

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

Related error patterns