> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/remix-run/react-router/llms.txt
> Use this file to discover all available pages before exploring further.

# RouterProvider

<Modes modes={["data", "framework"]} />

Render the UI for the given DataRouter. This component should typically be at the top of an app's element tree.

```tsx theme={null}
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} />
);
```

<Info>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`](https://react.dev/reference/react-dom/flushSync) implementation. You almost always want to use the version from `react-router/dom` unless you're running in a non-DOM environment.</Info>

## Type Declaration

```tsx theme={null}
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

<ParamField path="router" type="DataRouter" required>
  The DataRouter instance to use for navigation and data fetching. Create one using `createBrowserRouter`, `createMemoryRouter`, or `createHashRouter`.

  ```tsx theme={null}
  const router = createBrowserRouter(routes);
  <RouterProvider router={router} />
  ```
</ParamField>

<ParamField path="flushSync" type="(fn: () => unknown) => undefined">
  The [`ReactDOM.flushSync`](https://react.dev/reference/react-dom/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
</ParamField>

<ParamField path="onError" type="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`](https://react.dev/reference/react/Component#componentdidcatch) and is only present for render errors.

  ```tsx theme={null}
  <RouterProvider
    router={router}
    onError={(error, info) => {
      let { location, params, unstable_pattern, errorInfo } = info;
      console.error(error, location, errorInfo);
      reportToErrorService(error, location, errorInfo);
    }}
  />
  ```
</ParamField>

<ParamField path="unstable_useTransitions" type="boolean">
  Control whether router state updates are internally wrapped in [`React.startTransition`](https://react.dev/reference/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`](https://react.dev/reference/react/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](https://reactrouter.com/explanation/react-transitions).
</ParamField>

## Example

```tsx theme={null}
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);
      }}
    />
  );
}
```