RouterProvider

• Framework
• Data
• Declarative

Summary

Reference Documentation ↗

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.

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.