Proposal: Route-Level Prefetch for React Router

[jin-Pro]

Summary

Introduce a prefetch option in RouteObject so that React Router can preload code or data for likely next routes. This improves navigation speed and keeps prefetch logic close to routing.

API

interface RouteObject {
path?: string;
element?: React.ReactNode;
children?: RouteObject[];
prefetch?: Array<() => Promise>;
}

Runs on mount by default (future: hover, viewport, idle policies)

Executes once per session; errors are non‑blocking

Example

const ProductDetailsPage = React.lazy(() => import('./routes/products/DetailsPage'));
const NewProductPage= React.lazy(() => import('./routes/products/NewPage'));

const routes: RouteObject[] = [
  {
    path: 'products',
    children: [
      {
        path: '',
        element: (
          <Suspense>
            <ProductsPage />
          </Suspense>
        ),
        prefetch: [
          () => import('./routes/products/DetailsPage'),
          NewProductPage,
        ],
      },
      {
        path: 'details/:id',
        element: (
          <Suspense>
            <ProductDetailsPage />
          </Suspense>
        ),
      },
      {
        path: 'new',
        element: (
          <Suspense>
            <NewProductPage />
          </Suspense>
        ),
      },
    ],
  },
];

Benefits

Faster perceived navigation

Centralized, standardized prefetching

Backward compatible (optional field)

Notes

Over‑prefetch may waste bandwidth → allow global limits/policies

Compatible with Suspense (dynamic imports resolve instantly after prefetch)

Ask: Add prefetch support in core to simplify performance optimization.

[brophdawg11]

Duplicate of #12375