hydrateFallbackElement

hydrateFallbackElement

If you are using Server-Side Rendering and you are leveraging partial hydration, then you can specify an Element/Component to render for non-hydrated routes during the initial hydration of the application.

If you do not wish to specify a React element (i.e., hydrateFallbackElement={<MyFallback />}) you may specify an HydrateFallback component instead (i.e., HydrateFallback={MyFallback}) and React Router will call createElement for you internally.

This feature only works if using a data router, see Picking a Router

let router = createBrowserRouter(
  [
    {
      id: "root",
      path: "/",
      loader: rootLoader,
      Component: Root,
      children: [
        {
          id: "invoice",
          path: "invoices/:id",
          loader: loadInvoice,
          Component: Invoice,
          HydrateFallback: InvoiceSkeleton,
        },
      ],
    },
  ],
  {
    future: {
      v7_partialHydration: true,
    },
    hydrationData: {
      root: {
        /*...*/
      },
      // No hydration data provided for the `invoice` route
    },
  }
);

There is no default fallback and it will just render null at that route level, so it is recommended that you always provide your own fallback element.

Docs and examples CC 4.0