How do you handle 404 errors in React Router?

You handle 404 errors in React Router by using a wildcard route (path='*') as a fallback to render a custom NotFound component when no other routes match.

What does path='*' do in React Router?

The path='*' acts as a wildcard that catches all unmatched routes, making it ideal for rendering a 404 error page.

How Do You Handle 404 Errors in React Routing? | FullStackPrep.Dev

💡 Concept Name

React Router 404 Handling – A catch-all route that displays a fallback page when no defined route matches the current URL.

📘 Quick Intro

In React Router, a 404 or "Not Found" page can be shown using a wildcard path (*) that matches any undefined route. This fallback route is placed last in the routing configuration.

🧠 Analogy / Short Story

Imagine walking into a building with many rooms labeled clearly—if you try to enter a room that doesn’t exist, a guard stops you and shows you a “room not found” message.

In React, the 404 page acts like that guard, catching incorrect or unknown URLs and helping guide users back to safety.

🔧 Technical Explanation

🧭 A wildcard route with path="*" should be added as the last route in your <Routes>.
📄 This route renders a custom 404 component when no other route matches.
🔂 In React Router v6+, only one route is matched at a time, so order matters less, but wildcard must still go last for clarity.
🎨 The 404 component can include navigation links or UI to guide the user back.

💻 Real Code Example


// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} /> {/* 404 fallback */}
      </Routes>
    </Router>
  );
}

// NotFound.js
export default function NotFound() {
  return <h2>404 - Page Not Found</h2>;
}

❓ Interview Q&A

Q1: What is a 404 error in web apps?
A: It indicates that the requested page or route was not found on the server or in the app.

Q2: How do you create a 404 handler in React Router?
A: By adding a route with path="*" to catch unmatched URLs.

Q3: Where should the 404 route be placed in the routing structure?
A: At the end of the route list to act as a fallback.

Q4: Can you style the 404 page in React?
A: Yes, you can fully customize it like any other component.

Q5: What happens if the 404 route is not defined?
A: The user sees a blank screen or default browser error when no match is found.

Q6: Is the 404 route part of standard React Router behavior?
A: No, it must be manually added using the wildcard path.

Q7: Can you redirect users from 404 pages?
A: Yes, use useNavigate() to redirect them to safe routes.

Q8: How does React Router v6 handle route matching?
A: It only matches the first best route, so wildcard helps catch unknown ones.

Q9: Can dynamic routes conflict with the 404 wildcard?
A: No, dynamic routes are prioritized before *.

Q10: Is the * symbol only for 404s?
A: It's mostly used for 404, but can also be used to match any sub-path.

📝 MCQs

Q1. What does path='*' represent in React Router?

Root path
Nested routes
A wildcard to catch all unmatched routes
Static route

Q2. Which component should be shown when no other route matches?

Redirect component
About component
404 NotFound component
Fallback switch

Q3. Where should the wildcard route be placed in the route list?

At the top
Randomly
At the end
In the middle

Q4. What hook can be used to navigate from a 404 page?

useParams()
useNavigate()
useLocation()
useLink()

Q5. What happens if no route matches and no wildcard exists?

Home page loads
Redirect to /
Blank screen or default error
App restarts

Q6. Which version introduced simplified wildcard routes?

v3
v4
v5
React Router v6

Q7. Can wildcard routes be styled like normal components?

No
Yes
Only with CSS modules
Only with state

Q8. Is path='*' considered exact match?

Yes
No, it's a fallback for all unmatched
Sometimes
Only on subroutes

Q9. How do you handle redirection from 404 page?

Use useRef
Set state
Use useNavigate() to redirect to valid route
Use props.children

Q10. Why is the 404 page important?

For testing
Improves SEO
It improves UX by handling errors gracefully
Only for admins

💡 Bonus Insight

You can enhance the 404 experience with animations, links to common pages, or even search suggestions. It's an opportunity to keep users engaged instead of losing them.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

How Do You Handle 404 Errors in React Routing?