Skip to content

Unknown routes render a blank page instead of a 404 #12

@KonstantinMB

Description

@KonstantinMB

Problem

Navigating to any URL the React router doesn't recognize returns HTTP 200 with an empty body instead of a 404 page. Users hitting a typo, stale link, or someone else's typo'd share end up looking at a blank cream-colored page with no nav, no message, no escape route.

Reproduction (verified via gstack QA)

$ B=~/.claude/skills/gstack/browse/dist/browse

$ $B goto https://exploreyc.com/this-is-not-a-real-page
Navigated to https://exploreyc.com/this-is-not-a-real-page (200)

$ $B wait --networkidle
$ $B js "document.body.innerHTML.length"
31    # i.e. essentially empty

$ $B js "document.body.textContent"
"\n    \n  \n\n"

Same happens for stale URLs that sound right but aren't actual routes — e.g. I found this while testing /validate-idea (the real route is /validator). A shared link to /validate-idea from a blog post, tweet, or old README would silently fail.

Proposed fix

Add a catch-all <Route path="*"> in the React router that renders a small 404 page with:

  • A clear "Page not found" message
  • The site nav (so the user can recover)
  • A link back home
  • Maybe a witty hacker-themed touch to match the rest of the design

In the future, also wire up vercel.json routes so the response status is 404 (not 200), but that's a follow-up — the React-level fix is the user-visible win.

Acceptance criteria

  • https://exploreyc.com/whatever-junk renders the new 404 page with the site nav
  • Visible "Page not found" text + link to home
  • The fallback route is the last route in the React Router config (otherwise it eats everything)
  • Page title is 404 Not Found — ExploreYC (works with the per-page-title issue once that lands)
  • Bonus: log unknown-route hits to console with the bad path, for future analytics

Pointers

  • frontend/src/App.tsx — where the <Routes> block lives. Add <Route path="*" element={<NotFoundPage />} /> at the end.
  • Create frontend/src/pages/NotFoundPage.tsx for the 404 component.

Scope

Touches 2 files (1 new). Estimated time: 30 min - 1 hour.

Want to take this on? Comment below and I'll assign it.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomers

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions