DEV Community

Kamran Khan
Kamran Khan

Posted on

A 404 page is a product decision: why my starter kit ships a NotFound route

#react #javascript #webdev #saas

Every SPA has routes that don't exist. Most starter kits let the browser show a blank page when you hit one — the route list just ends, and the user stares at whatever the layout didn't render. I think that's a product bug dressed as a routing detail, so my kit ships a deliberate 404 page and a catch-all route.

It's a small component:

export default function NotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gray-100 px-4">
      <div className="text-center">
        <p className="text-6xl font-bold text-indigo-600">404</p>
        <h1 className="mt-4 text-2xl font-bold text-slate-900">Page not found</h1>
        <p className="mt-2 text-sm text-slate-500">
          The page you're looking for doesn't exist or was moved.
        </p>
        <Link to="/">Go home</Link>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Nothing clever. But look at what surrounds it in the router:

<Route path="/404" element={<NotFound />} />
<Route path="*" element={<NotFound />} />
<Route path="/home" element={<Navigate to="/" replace />} />
Enter fullscreen mode Exit fullscreen mode

Three decisions in four lines. The catch-all means no URL ever renders a dead layout. The explicit /404 route exists so the API or any redirect logic can send users somewhere named. And the /home → / redirect is the kind of thing real users type — I caught it once in analytics on a client project and never shipped a dashboard without it again.

Why does this matter in a starter kit? Because the person buying it is evaluating your judgment, not your components. Anyone can render a dashboard. A kit that already handles the dead ends, the mistyped URLs, the "what happens when" states tells the buyer: this author thought about the product, not just the happy path. It also means their first demo to a client never hits a blank screen — which is exactly the kind of embarrassment that loses a deal in the room.

Small rule I follow now: for every route I add to an app, I ask what the user sees when the route is wrong. If the answer is "nothing," that's a bug I haven't filed yet.

The kit (Laravel + React SaaS Starter Kit, $19 one-time: https://kamranofficial.gumroad.com/l/mhekoig) is full of these unglamorous decisions — the 404 page, the JSON error contract, the 401 interceptor. None of them demo well. All of them are why the demo never embarrasses you.

Top comments (0)