Explain Handling 404s and Catch-All Routes in React

62 / 100

Routingbeginner

Handling 404s and Catch-All Routes

Learn how to define a fallback route that matches any URL not handled by more specific routes, for a proper Not Found page.

A catch-all (wildcard) route matches any URL that doesn't match a more specific route definition earlier in the routing configuration, letting you render a proper 'Page Not Found' UI instead of a blank screen or a router error when a user navigates to (or types) a URL that doesn't correspond to anything in the app. In React Router, this is expressed with a path of * as the last route in a <Routes> list.

A catch-all route is like a general delivery window at a post office for mail that doesn't match any specific PO box number — every more specific box gets checked first, and only mail that doesn't fit any of them ends up handled by the general fallback window.

Key Concepts

Route matching in React Router considers specificity and order: more specific static and dynamic routes should generally be listed before a trailing wildcard, since the wildcard is meant to be the fallback of last resort after every real route has had a chance to match. Placing * earlier than intended could unintentionally swallow URLs meant for more specific routes defined after it.

A well-designed 404 page typically offers navigation back to a known-good location (like the home page or a search box) rather than just displaying an error message, and in real applications is often also configured server-side (for direct navigation hits) to return an actual HTTP 404 status code, since the client-side catch-all route alone doesn't change what status code the server responds with for a direct request to that URL.

Interviewers occasionally ask candidates to explain the difference between a client-side 404 route (which only handles a mismatch after the app's JavaScript has loaded and taken over routing) and a proper server-side 404 status code, which matters for SEO and for any client that isn't a browser executing your React app's JavaScript.