RouterProvider

• Framework
• Data
• Declarative

Summary

Reference Documentation ↗

Accepts a data router, subscribes to its changes, and renders the matching components. Should typically be at the top of an app's element tree.

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

let router = createBrowserRouter(routes);

createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Props

flushSync

This is an implementation detail and shouldn't need to be used in your application.

This prop provides a way to inject the react-dom flushSync implementation when running RouterProvider in a DOM environment for use during routing operations with flushSync enabled (i.e., useNavigate).

• If you're running RouterProvider in a memory environment (such as unit tests) you can import it from react-router and omit this prop
• If you are running RouterProvider in a DOM environment, you should be importing it from react-router/dom which automatically passes the react-dom flushSync implementation for you

router

The initialized data router for the application.