[Docs]: Missing explicit documentation for handling 404/non-existent routes (beginners issue)

[BaykovAleksandr]

Describe what's incorrect/missing in the documentation

Problem: Current React Router v6 documentation lacks clear, beginner-friendly examples for handling 404 pages and non-existent routes.

Details:

No obvious examples showing path="*" usage for catch-all routes

No clear guidance on where to place 404 routes in route configuration

Missing comparison between different approaches (BrowserRouter vs Data Router)

Common use case that's not explicitly documented, causing confusion for newcomers

Impact: Beginners struggle to implement basic 404 handling, leading to repetitive questions in discussions and Stack Overflow.

Request: Add explicit examples of 404 route handling in documentation, preferably in a "Common Patterns" or "Error Handling" section.

Examples with AI:
example 1

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Catch-all route - MUST be last */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

expamle2

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      { index: true, element: <Home /> },
      { path: 'about', element: <About /> },
    ],
  },
  // Catch-all for non-existent paths
  { path: '*', element: <NotFound /> },
]);

function App() {
  return <RouterProvider router={router} />;
}

example 3

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorBoundary />, // For runtime errors
    children: [
      // ... your routes
    ],
  },
  { path: '*', element: <NotFound /> }, // For non-existent paths
]);

function ErrorBoundary() {
  const error = useRouteError();
  // Handle both 404s and other errors
  return isRouteErrorResponse(error) && error.status === 404 
    ? <NotFound />
    : <GenericError />;
}

[timdorr]

If you're referring to v6, we're not updating those docs anymore. But this is covered in the tutorial: https://reactrouter.com/6.30.2/start/tutorial#not-found-data

There is the equivalent tutorial for v7 and also the guide on error boundaries: https://reactrouter.com/how-to/error-boundary