createBrowserRouter

createBrowserRouter and RouterProvider

A data router is built before rendering, not during it. createBrowserRouter(routes, options) takes an array of plain route objects and returns a router instance; <RouterProvider router={router} /> is then the only React Router 139,386 element in your tree — no <Routes>, no <Route>. Later examples assume this scaffolding.

A data router, created once at module scopeJavaScript

import { createBrowserRouter } from 'react-router';
import { RouterProvider } from 'react-router/dom';
const router = createBrowserRouter([
  { path: '/', Component: Layout, ErrorBoundary: RootError, children: [
    { index: true, Component: Home },
    { path: 'products', Component: List, loader: listLoader },
    { path: 'products/:id', Component: Detail, loader: detailLoader, action: saveProduct },
    { path: '*', Component: NotFound },
  ] },
], { basename: '/app' });
createRoot(document.getElementById('root')).render(<RouterProvider router={router} />);

Note the import split: route objects, hooks and components come from react-router, but RouterProvider comes from react-router/dom, the build that wires the router into React 7,897 DOM's flushSync; the one exported from react-router is the fallback for non-DOM renderers. In v7 both lived in react-router-dom, a package that no longer exists, so this is the mistake v8 newcomers make most often.

A route object accepts path, index, children, Component or element, ErrorBoundary or errorElement, loader, action, middleware, lazy, handle, shouldRevalidate, id and caseSensitive. The capitalized fields take functions, not elements, which is what lets lazy swap them in later.

Create the router outside the component that renders it: calling createBrowserRouter during render builds a new router every time, throwing away history and loader data. createHashRouter, createMemoryRouter (for tests, via initialEntries) and createStaticRouter share the signature. Beyond basename, the options carry hydrationData (a server render's loader data, so the client does not refetch on hydration), getContext for middleware (Route Middleware) and patchRoutesOnNavigation for routes discovered on demand.

MENU

createBrowserRouter