SamwithCode

Handling Error Page in React JS 2025

⚠️ Handling Error Pages in React JS 2025 (React Router v6.4+)

With React Router v6.4+, error handling has become more intuitive using the errorElement prop in routes. You can now define a fallback error UI per route or globally.

🔧 Step 1: Create an Error Component


import { useRouteError } from 'react-router-dom';

export default function ErrorPage() {
  const error = useRouteError();
  console.error(error);

  return (
    

      
Oops!

      
Something went wrong.

      
{error.statusText || error.message}

    

  );
}

🛠️ Step 2: Define It in Your Route (Router Setup)


import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import AppLayout from './AppLayout';
import Home from './pages/Home';
import About from './pages/About';
import ErrorPage from './components/ErrorPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: ,
    errorElement: , // 👈 Global error handler
    children: [
      { index: true, element:  },
      { path: 'about', element:  }
    ]
  }
]);

function App() {
  return ;
}

✅ Bonus: Catching 404 (Not Found)

To handle unknown routes, add a wildcard route at the bottom:


{
  path: '*',
  element:  // Or a custom 404 page
}

📌 Summary

  • Use errorElement in your route to catch errors.
  • useRouteError() gives access to the thrown error.
  • Customize messages for 404 or unexpected issues.