Creating a 404 Page with React Router 6

Last updated by Noel Varanda, Fri Jul 21 2023

React Router

404 Page

Error Handling

Web Development

Preview

Below is a preview of the output of the code. Have a look at all the code here (opens in a new tab).

The code

import {
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Outlet,
  Link,
} from 'react-router-dom';
import * as React from 'react';
 
const Layout = () => (
  <>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/foo">Broken link</Link>
        </li>
      </ul>
    </nav>
    <main>
      <Outlet />
    </main>
  </>
);
const Home = () => <h1>Home</h1>;
const NotFound = () => <h1>Not Found</h1>;
 
const routes = createRoutesFromElements(
  <Route element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="*" element={<NotFound />} />
  </Route>
);
 
const router = createBrowserRouter(routes);
 
const App = () => <RouterProvider router={router} />;
 
export default App;

Keep up to date with any latest changes or announcements by subscribing to the newsletter below.