Skip to main content
Render the UI for the given DataRouter. This component should typically be at the top of an app’s element tree. 
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";
import { createRoot } from "react-dom/client";

const router = createBrowserRouter(routes);
createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);
Please note that this component is exported both from react-router and react-router/dom with the only difference being that the latter automatically wires up react-dom’s flushSync implementation. You almost always want to use the version from react-router/dom unless you’re running in a non-DOM environment.

​
Type Declaration

export interface RouterProviderProps {
  router: DataRouter;
  flushSync?: (fn: () => unknown) => undefined;
  onError?: ClientOnErrorFunction;
  unstable_useTransitions?: boolean;
}

export function RouterProvider({
  router,
  flushSync,
  onError,
  unstable_useTransitions,
}: RouterProviderProps): React.ReactElement;

export interface ClientOnErrorFunction {
  (
    error: unknown,
    info: {
      location: Location;
      params: Params;
      unstable_pattern: string;
      errorInfo?: React.ErrorInfo;
    },
  ): void;
}

​
Props

​
router
DataRouter
required
The DataRouter instance to use for navigation and data fetching. Create one using createBrowserRouter, createMemoryRouter, or createHashRouter.
const router = createBrowserRouter(routes);
<RouterProvider router={router} />
​
flushSync
(fn: () => unknown) => undefined
The ReactDOM.flushSync implementation to use for flushing updates.You usually don’t have to worry about this:
  • The RouterProvider exported from react-router/dom handles this internally for you
  • If you are rendering in a non-DOM environment, you can import RouterProvider from react-router and ignore this prop
​
onError
ClientOnErrorFunction
An error handler function that will be called for any middleware, loader, action, or render errors that are encountered in your application. This is useful for logging or reporting errors instead of in the ErrorBoundary because it’s not subject to re-rendering and will only run one time per error.The errorInfo parameter is passed along from componentDidCatch and is only present for render errors.
<RouterProvider
  router={router}
  onError={(error, info) => {
    let { location, params, unstable_pattern, errorInfo } = info;
    console.error(error, location, errorInfo);
    reportToErrorService(error, location, errorInfo);
  }}
/>
​
unstable_useTransitions
boolean
Control whether router state updates are internally wrapped in React.startTransition.
  • When left undefined, all state updates are wrapped in React.startTransition
    • This can lead to buggy behaviors if you are wrapping your own navigations/fetchers in startTransition.
  • When set to true, Link and Form navigations will be wrapped in React.startTransition and router state changes will be wrapped in React.startTransition and also sent through useOptimistic to surface mid-navigation router state changes to the UI.
  • When set to false, the router will not leverage React.startTransition or React.useOptimistic on any navigations or state changes.
For more information, please see the docs.

​
Example

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

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      {
        path: "dashboard",
        Component: Dashboard,
      },
      {
        path: "about",
        Component: About,
      },
    ],
  },
]);

function App() {
  return (
    <RouterProvider
      router={router}
      onError={(error, info) => {
        console.error("Router error:", error);
        logErrorToService(error, info);
      }}
    />
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us