Nearby lessons
30 of 43🧭 ReactJS – Page Not Found & 404 Page
📌 What is Page Not Found?
Page Not Found | No Match Routes
In React Router, when a user tries to access a route that doesn't exist,
we can handle it gracefully by showing a 404 Page.
This is done by adding a special path="*" route.
📌 What is a 404 Page?
- A 404 Page appears when no matching route is found.
- It improves user experience by showing a friendly error message.
- NaN
⚙️ Implementing Page Not Found
To create a 404 page in React Router v6,
we define a Route with path="*".
This route will match all undefined paths and render the PageNotFound component.
🧩 Why use path='*'?
In React Router v6, the path="*" acts as a catch-all route.
If no other route matches, this one is rendered.
It ensures that users always see a clear error page instead of a blank screen.
🎨 Enhancing 404 Page
You can style your PageNotFound component with CSS or
add navigation links (e.g., Back to Home button) for better UX.