Routing with React Router
React Router 404 Not Found Page
A catch-all route with path="*" matches any URL no other route claimed, which is how you render a friendly not-found page instead of a blank screen.
What is Router 404 Not Found Page in React?
A catch-all route with path="*" matches any URL no other route claimed, which is how you render a friendly not-found page instead of a blank screen.
Router 404 Not Found Page example
JSX
<Routes>
<Route path="/" element={<Home />} />
<Route path="/internships" element={<JobList />} />
<Route path="*" element={<NotFound />} />
</Routes>Key points to remember
- Place it inside Routes; the order does not matter because v6 ranks matches by specificity.
- A client-side 404 still returns HTTP 200 — for SEO, real 404 status codes need server rendering.
- Give the page useful links back into the site rather than a dead end.
Common mistakes with Router 404 Not Found Page
- Assuming search engines treat a client-rendered 404 as a real 404 — they see a 200 response.
React Router 404 Not Found Page— Interview Questions & FAQs
How do I return a real 404 status code?+
A pure client-side SPA cannot — the server already responded 200 before React ran. You need server-side rendering (Next.js, Remix) or server rules to send the correct status.