🗺️ Route Configuration

Why configure routes as data?

Think of route configuration like a building's blueprint. Each route is a room; the configuration says how the rooms connect, which ones share a hallway, and what happens if someone opens a door that leads nowhere. When routes are just JSX scattered in components, that blueprint is hard to see. When routes are a single tree of plain objects, the whole structure is visible at a glance — and, crucially, the router can read ahead to load data and catch errors before a component ever renders.

That tree is exactly what you'll build in code below. Notice how products has children of its own — nesting is the heart of route configuration.

Two styles, one router

React Router v6+ lets you declare routes two ways. Both use the same matching engine; you pick based on what you need.

Object-based configuration

Instead of JSX, you describe each route as an object. The keys mirror the props you already know: path, element, plus a new children array for nesting. You hand the tree to createBrowserRouter and render a single <RouterProvider>.

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

// Routes are just data — an array of objects
const router = createBrowserRouter([
  {
    path: '/',
    element: <MainLayout />,     // shared shell (nav, footer)
    errorElement: <ErrorPage />, // catches errors for this branch
    children: [
      { index: true,        element: <Home /> },     // "/"
      { path: 'about',      element: <About /> },    // "/about"
      {
        path: 'products',
        element: <Products />,                        // "/products"
        children: [
          { index: true,       element: <ProductList /> },
          { path: ':productId', element: <ProductDetail /> }, // "/products/42"
        ],
      },
      { path: '*', element: <NotFound /> },          // catch-all 404
    ],
  },
]);

function App() {
  // One provider replaces <BrowserRouter> + <Routes>
  return <RouterProvider router={router} />;
}

Nested routes & layouts

The real payoff of nesting is shared layouts. A parent route renders the chrome that every child shares — the nav bar, sidebar, footer — and marks the spot where the active child should appear with an <Outlet />. Think of <Outlet /> as a picture frame: the layout stays on the wall while the router swaps the photo inside it.

import { Outlet, Link } from 'react-router-dom';

function MainLayout() {
  return (
    <div className="layout">
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/products">Products</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>

      <main>
        <Outlet /> {/* ← the matched child route renders here */}
      </main>

      <footer>© 2026</footer>
    </div>
  );
}

You can have different layouts for different sections — a public shell, an auth shell, a dashboard shell — just by giving each its own parent route with its own layout component and <Outlet />.

const router = createBrowserRouter([
  {
    element: <MainLayout />,      // public pages share this shell
    children: [
      { path: '/',      element: <Home /> },
      { path: 'about',  element: <About /> },
    ],
  },
  {
    element: <AuthLayout />,      // login/register share a different shell
    children: [
      { path: 'login',    element: <Login /> },
      { path: 'register', element: <Register /> },
    ],
  },
]);

Index routes & the 404

Two special route entries handle the edges of your tree.

The index route — the default child

An index: true route is what renders inside a parent's <Outlet /> when the URL matches the parent exactly. It's the "home page" of that branch. It has no path because it is the parent's path.

{
  path: 'products',
  element: <ProductsLayout />,
  children: [
    { index: true,        element: <ProductList /> },   // shown at /products
    { path: ':productId', element: <ProductDetail /> }, // shown at /products/42
  ],
}

The catch-all — your 404

A route with path: '*' matches anything no other route claimed. Put one at the top level so a typo'd URL shows a helpful page instead of a blank screen.

function NotFound() {
  return (
    <div>
      <h1>404 — Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/">Go to Homepage</Link>
    </div>
  );
}

// somewhere in the route tree:
{ path: '*', element: <NotFound /> }

Error boundaries

What happens when a component throws, or a data load fails? Without a plan, the user sees a white screen and a scary console error. The data router lets you attach an errorElement to any route: if anything in that route (or its children) throws, the router renders the error element instead of crashing the whole app.

Inside the error element, the useRouteError hook gives you the thrown value, and isRouteErrorResponse tells you whether it was an HTTP-style response (like a 404 or 401) so you can tailor the message.

import { useRouteError, isRouteErrorResponse, Link } from 'react-router-dom';

function ErrorPage() {
  const error = useRouteError();

  // Router-thrown responses (e.g. a 404 from a loader)
  if (isRouteErrorResponse(error)) {
    return (
      <div className="error-page">
        <h1>{error.status} — {error.statusText}</h1>
        <p>{error.data?.message ?? 'Something went wrong.'}</p>
        <Link to="/">Go home</Link>
      </div>
    );
  }

  // Plain JavaScript errors
  return (
    <div className="error-page">
      <h1>Oops! Something broke.</h1>
      <p>{error?.message ?? 'Unknown error'}</p>
      <Link to="/">Go home</Link>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <MainLayout />,
    errorElement: <ErrorPage />, // one boundary protects this whole branch
    children: [ /* ... */ ],
  },
]);

Organizing & lazy-loading

As the tree grows, keep it readable by splitting routes into per-feature modules and importing them into the root config.

// blog.routes.js — one feature's routes, exported as data
export const blogRoutes = {
  path: 'blog',
  children: [
    { index: true,          element: <BlogList /> },
    { path: ':slug',        element: <BlogPost /> },
    { path: 'tag/:tagName', element: <TaggedPosts /> },
  ],
};

// router.js — assemble the app from feature modules
import { blogRoutes } from './blog.routes';
import { shopRoutes } from './shop.routes';

const router = createBrowserRouter([
  { path: '/', element: <MainLayout />, children: [blogRoutes, shopRoutes] },
]);

Lazy-load heavy screens

You don't want the code for an admin dashboard downloaded by a visitor who never opens it. The data router supports a route-level lazy that loads the screen's code only when its URL is visited — shrinking your initial bundle.

const router = createBrowserRouter([
  {
    path: '/dashboard',
    // Code for Dashboard is fetched on demand, not up front
    lazy: () => import('./pages/Dashboard'), // module exports { Component, loader? }
  },
]);

Practice & Quiz

<Routes>
  <Route element={<MainLayout />}>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
  </Route>
  <Route path="*" element={<NotFound />} />
</Routes>

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

const router = createBrowserRouter([
  {
    element: <MainLayout />,
    children: [
      { index: true,   element: <Home /> },
      { path: 'about', element: <About /> },
    ],
  },
  { path: '*', element: <NotFound /> },
]);

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

function SettingsError() {
  const error = useRouteError();
  return <p>Couldn't load settings: {error?.message}</p>;
}

const settingsRoute = {
  path: 'settings',
  element: <Settings />,
  errorElement: <SettingsError />, // scoped to just this branch
};

Best Practices & Pitfalls

✅ Do

• Prefer the data router (createBrowserRouter) for real apps — it unlocks loaders, actions, and error boundaries
• Use nested routes + <Outlet /> to share layouts instead of repeating the shell on every page
• Give every branch (at least the root) an errorElement so no crash reaches the user unstyled
• Split large route trees into per-feature modules and lazy-load heavy screens
• Keep an index route for defaults and a path: '*' for 404s

❌ Don't

• Give child routes leading slashes ('/about') — they should be relative ('about')
• Forget the <Outlet /> in a layout — the children simply won't appear
• Duplicate the nav/footer in every page component when a layout route can hold it once
• Render more than one <RouterProvider> — configure a single router at the top

Summary

📚 Additional Resources

• React Router — Data routing & createBrowserRouter
• React Router — Nested routes & Outlet
• React Router — Error boundaries

🚀 What's Next?

Your route tree is defined and error-proofed. Now let's make moving through it feel great: the Navigation and Links lesson digs into <Link>, <NavLink> active styling, programmatic navigation, and accessible menus.