RouterProvider

Framework
Data
Declarative

Summary

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} />
);

Signature

function RouterProvider({
  router,
  flushSync: reactDomFlushSyncImpl,
}: RouterProviderProps): React.ReactElement

Props

flushSync

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

router

The DataRouter instance to use for navigation and data fetching.