RouterProvider

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

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,
  unstable_onError,
}: 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

unstable_onError

An error handler function that will be called for any loader/action/render errors that are encountered in your application. This is useful for logging or reporting errors instead of 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 unstable_onError=(error, errorInfo) => {
  console.error(error, errorInfo);
  reportToErrorService(error, errorInfo);
}} />

router

The DataRouter instance to use for navigation and data fetching.