react-router 6.4.0-pre.6 → 6.4.0-pre.9

package/CHANGELOG.md

@@ -1,5 +1,99 @@
 # react-router
 
+## 6.4.0-pre.9
+
+### Patch Changes
+
+- Feat: adds `deferred` support to data routers (#9002)
+
+  Returning a `deferred` from a `loader` allows you to separate _critical_ loader data that you want to wait for prior to rendering the destination page from _non-critical_ data that you are OK to show a spinner for until it loads.
+
+  ```jsx
+  // In your route loader, return a deferred() and choose per-key whether to
+  // await the promise or not.  As soon as the awaited promises resolve, the
+  // page will be rendered.
+  function loader() {
+    return deferred({
+      critical: await getCriticalData(),
+      lazy1: getLazyData(),
+    });
+  };
+
+  // In your route element, grab the values from useLoaderData and render them
+  // with <Deferred>
+  function DeferredPage() {
+    let data = useLoaderData();
+    return (
+      <>
+        <p>Critical Data: {data.critical}</p>
+        <Deferred
+          value={data.lazy}
+          fallback={<p>Loading...</p>}
+          errorElement={<RenderDeferredError />}>
+          <RenderDeferredData />
+        </Deferred>
+      </>
+    );
+  }
+
+  // Use separate components to render the data once it resolves, and access it
+  // via the useDeferredData hook
+  function RenderDeferredData() {
+    let data = useDeferredData();
+    return <p>Lazy: {data}</p>;
+  }
+
+  function RenderDeferredError() {
+    let data = useRouteError();
+    return <p>Error! {data.message} {data.stack}</p>;
+  }
+  ```
+
+  If you want to skip the separate components, you can use the Render Props
+  pattern and handle the rendering of the deferred data inline:
+
+  ```jsx
+  function DeferredPage() {
+    let data = useLoaderData();
+    return (
+      <>
+        <p>Critical Data: {data.critical}</p>
+        <Deferred value={data.lazy} fallback={<p>Loading...</p>}>
+          {(data) => <p>{data}</p>}
+        </Deferred>
+      </>
+    );
+  }
+  ```
+
+- feat: add basename support for data routers (#9026)
+- fix: Fix trailing slash behavior on pathless routing when using a basename (#9045)
+- Updated dependencies
+  - @remix-run/router@0.2.0-pre.4
+
+## 6.4.0-pre.8
+
+### Patch Changes
+
+- fix: Make path resolution trailing slash agnostic (#8861)
+- fix: Additional logic fixed for relative navigation from index/pathless layout routes (#8985)
+- fix: export ActionFunctionArgs/LoaderFunctionArgs up through router packages (#8975)
+- Updated dependencies
+  - @remix-run/router@0.2.0-pre.3
+
+## 6.4.0-pre.7
+
+### Minor Changes
+
+- Add support for functional updates in `useSearchParams` (similar to the `useState` callback signature) (#8955)
+
+### Patch Changes
+
+- Properly handle relative navigation from index/pathless routes (#8954)
+- Fix issues building with webpack + React 17 (#8938)
+- Updated dependencies
+  - `@remix-run/router@0.2.0-pre.2`
+
 ## 6.4.0-pre.6
 
 ## 6.4.0-pre.5
@@ -12,7 +106,7 @@
 
 ### Patch Changes
 
-- 031d5d1f: Fix missing dist files
+- Fix missing `dist` files
 
 ## 6.4.0-pre.3
 

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-import type { ActionFunction, DataRouteMatch, Fetcher, JsonFunction, LoaderFunction, Location, Navigation, Params, ParamParseKey, Path, PathMatch, PathPattern, RedirectFunction, RouteMatch, RouteObject, ShouldRevalidateFunction, To } from "@remix-run/router";
-import { Action as NavigationType, createPath, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
-import type { DataMemoryRouterProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
-import { createRoutesFromChildren, renderMatches, MemoryRouter, DataMemoryRouter, Navigate, Outlet, Route, Router, Routes, useRenderDataRouter, _resetModuleScope } from "./lib/components";
+import type { ActionFunction, ActionFunctionArgs, DataRouteMatch, Fetcher, JsonFunction, LoaderFunction, LoaderFunctionArgs, Location, Navigation, Params, ParamParseKey, Path, PathMatch, PathPattern, RedirectFunction, RouteMatch, RouteObject, ShouldRevalidateFunction, To } from "@remix-run/router";
+import { Action as NavigationType, createPath, deferred, generatePath, isDeferredError, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
+import type { DataMemoryRouterProps, DeferredProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
+import { createRoutesFromChildren, renderMatches, DataMemoryRouter, Deferred, MemoryRouter, Navigate, Outlet, Route, Router, Routes, useRenderDataRouter } from "./lib/components";
 import type { Navigator, NavigateOptions } from "./lib/context";
 import { DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
-import type { NavigateFunction } from "./lib/hooks";
-import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useLoaderData, useMatches, useRouteLoaderData, useRouteError, useNavigation, useRevalidator } from "./lib/hooks";
+import type { Deferrable, NavigateFunction } from "./lib/hooks";
+import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useDeferredData, useLoaderData, useMatches, useRouteLoaderData, useRouteError, useNavigation, useRevalidator } from "./lib/hooks";
 declare type Hash = string;
 declare type Pathname = string;
 declare type Search = string;
-export type { ActionFunction, DataMemoryRouterProps, DataRouteMatch, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
-export { DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
+export type { ActionFunction, ActionFunctionArgs, DataMemoryRouterProps, DataRouteMatch, Deferrable, DeferredProps, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
+export { DataMemoryRouter, Deferred, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, deferred, isDeferredError, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useDeferredData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
 /** @internal */
-export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, _resetModuleScope as UNSAFE_resetModuleScope, useRenderDataRouter, };
+export { NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, useRenderDataRouter, };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.4.0-pre.6
+ * React Router v6.4.0-pre.9
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,8 +8,8 @@
  *
  * @license MIT
  */
-import { invariant, resolveTo, getToPathname, joinPaths, matchPath, warning, parsePath, matchRoutes, isRouteErrorResponse, createMemoryHistory, Action, normalizePathname, stripBasename, createMemoryRouter } from '@remix-run/router';
-export { Action as NavigationType, createPath, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from '@remix-run/router';
+import { invariant, resolveTo, joinPaths, matchPath, warning, parsePath, matchRoutes, isDeferredError, isRouteErrorResponse, createMemoryHistory, Action, stripBasename, createMemoryRouter } from '@remix-run/router';
+export { Action as NavigationType, createPath, deferred, generatePath, isDeferredError, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from '@remix-run/router';
 import * as React from 'react';
 
 /**
@@ -191,6 +191,7 @@ const shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore
 const useSyncExternalStore = "useSyncExternalStore" in React ? // @ts-expect-error
 (module => module.useSyncExternalStore)(React) : shim;
 
+// Contexts for data routers
 const DataRouterContext = /*#__PURE__*/React.createContext(null);
 
 if (process.env.NODE_ENV !== "production") {
@@ -203,6 +204,12 @@ if (process.env.NODE_ENV !== "production") {
   DataRouterStateContext.displayName = "DataRouterState";
 }
 
+const DeferredContext = /*#__PURE__*/React.createContext(null);
+
+if (process.env.NODE_ENV !== "production") {
+  DeferredContext.displayName = "Deferred";
+}
+
 const NavigationContext = /*#__PURE__*/React.createContext(null);
 
 if (process.env.NODE_ENV !== "production") {
@@ -250,12 +257,13 @@ function useHref(to) {
     pathname,
     search
   } = useResolvedPath(to);
-  let joinedPathname = pathname;
+  let joinedPathname = pathname; // If we're operating within a basename, prepend it to the pathname prior
+  // to creating the href.  If this is a root navigation, then just use the raw
+  // basename which allows the basename to have full control over the presence
+  // of a trailing slash on root links
 
   if (basename !== "/") {
-    let toPathname = getToPathname(to);
-    let endsWithSlash = toPathname != null && toPathname.endsWith("/");
-    joinedPathname = pathname === "/" ? basename + (endsWithSlash ? "/" : "") : joinPaths([basename, pathname]);
+    joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
   }
 
   return navigator.createHref({
@@ -317,6 +325,34 @@ function useMatch(pattern) {
   } = useLocation();
   return React.useMemo(() => matchPath(pattern, pathname), [pathname, pattern]);
 }
+/**
+ * The interface for the navigate() function returned from useNavigate().
+ */
+
+/**
+ * When processing relative navigation we want to ignore ancestor routes that
+ * do not contribute to the path, such that index/pathless layout routes don't
+ * interfere.
+ *
+ * For example, when moving a route element into an index route and/or a
+ * pathless layout route, relative link behavior contained within should stay
+ * the same.  Both of the following examples should link back to the root:
+ *
+ *   <Route path="/">
+ *     <Route path="accounts" element={<Link to=".."}>
+ *   </Route>
+ *
+ *   <Route path="/">
+ *     <Route path="accounts">
+ *       <Route element={<AccountsLayout />}>       // <-- Does not contribute
+ *         <Route index element={<Link to=".."} />  // <-- Does not contribute
+ *       </Route
+ *     </Route>
+ *   </Route>
+ */
+function getPathContributingMatches(matches) {
+  return matches.filter((match, index) => index === 0 || !match.route.index && match.pathnameBase !== matches[index - 1].pathnameBase);
+}
 /**
  * Returns an imperative method for changing the location. Used by <Link>s, but
  * may also be used by other elements to change the location.
@@ -324,6 +360,7 @@ function useMatch(pattern) {
  * @see https://reactrouter.com/docs/en/v6/hooks/use-navigate
  */
 
+
 function useNavigate() {
   !useInRouterContext() ? process.env.NODE_ENV !== "production" ? invariant(false, // TODO: This error is probably because they somehow have 2 versions of the
   // router loaded. We can help them understand how to avoid that.
@@ -337,15 +374,8 @@ function useNavigate() {
   } = React.useContext(RouteContext);
   let {
     pathname: locationPathname
-  } = useLocation(); // Ignore pathless matches (i.e., share the same pathname as their ancestor)
-
-  let pathContributingMatches = matches.filter((match, index) => index === 0 || match.pathnameBase !== matches[index - 1].pathnameBase);
-
-  if (matches.length > 0 && matches[matches.length - 1].route.index) {
-    pathContributingMatches.pop();
-  }
-
-  let routePathnamesJson = JSON.stringify(pathContributingMatches.map(match => match.pathnameBase));
+  } = useLocation();
+  let routePathnamesJson = JSON.stringify(getPathContributingMatches(matches).map(match => match.pathnameBase));
   let activeRef = React.useRef(false);
   React.useEffect(() => {
     activeRef.current = true;
@@ -363,10 +393,13 @@ function useNavigate() {
       return;
     }
 
-    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname);
+    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname); // If we're operating within a basename, prepend it to the pathname prior
+    // to handing off to history.  If this is a root navigation, then we
+    // navigate to the raw basename which allows the basename to have full
+    // control over the presence of a trailing slash on root links
 
     if (basename !== "/") {
-      path.pathname = joinPaths([basename, path.pathname]);
+      path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
     }
 
     (!!options.replace ? navigator.replace : navigator.push)(path, options.state, options);
@@ -428,7 +461,7 @@ function useResolvedPath(to) {
   let {
     pathname: locationPathname
   } = useLocation();
-  let routePathnamesJson = JSON.stringify(matches.map(match => match.pathnameBase));
+  let routePathnamesJson = JSON.stringify(getPathContributingMatches(matches).map(match => match.pathnameBase));
   return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname), [to, routePathnamesJson, locationPathname]);
 }
 /**
@@ -528,9 +561,9 @@ function DefaultErrorElement() {
     }
   }, message), error != null && error.stack ? /*#__PURE__*/React.createElement("pre", {
     style: preStyles
-  }, error == null ? void 0 : error.stack) : null, /*#__PURE__*/React.createElement("p", null, "\uD83D\uDCBF Hey developer \uD83D\uDC4B"), /*#__PURE__*/React.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own\u00A0", /*#__PURE__*/React.createElement("code", {
+  }, error == null ? void 0 : error.stack) : null, /*#__PURE__*/React.createElement("p", null, "\uD83D\uDCBF Hey developer \uD83D\uDC4B"), /*#__PURE__*/React.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own\xA0", /*#__PURE__*/React.createElement("code", {
     style: codeStyles
-  }, "errorElement"), " props on\u00A0", /*#__PURE__*/React.createElement("code", {
+  }, "errorElement"), " props on\xA0", /*#__PURE__*/React.createElement("code", {
     style: codeStyles
   }, "<Route>")));
 }
@@ -707,24 +740,20 @@ function useMatches() {
  */
 
 function useLoaderData() {
-  var _state$loaderData;
-
   let state = useDataRouterState(DataRouterHook.UseLoaderData);
   let route = React.useContext(RouteContext);
   !route ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoaderData must be used inside a RouteContext") : invariant(false) : void 0;
   let thisRoute = route.matches[route.matches.length - 1];
   !thisRoute.route.id ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoaderData can only be used on routes that contain a unique \"id\"") : invariant(false) : void 0;
-  return (_state$loaderData = state.loaderData) == null ? void 0 : _state$loaderData[thisRoute.route.id];
+  return state.loaderData[thisRoute.route.id];
 }
 /**
  * Returns the loaderData for the given routeId
  */
 
 function useRouteLoaderData(routeId) {
-  var _state$loaderData2;
-
   let state = useDataRouterState(DataRouterHook.UseRouteLoaderData);
-  return (_state$loaderData2 = state.loaderData) == null ? void 0 : _state$loaderData2[routeId];
+  return state.loaderData[routeId];
 }
 /**
  * Returns the action data for the nearest ancestor Route action
@@ -748,9 +777,15 @@ function useRouteError() {
   let error = React.useContext(RouteErrorContext);
   let state = useDataRouterState(DataRouterHook.UseRouteError);
   let route = React.useContext(RouteContext);
-  let thisRoute = route.matches[route.matches.length - 1]; // If this was a render error, we put it in a RouteError context inside
+  let thisRoute = route.matches[route.matches.length - 1];
+  let deferredValue = React.useContext(DeferredContext); // Return deferred errors if we're inside a Deferred errorElement
+
+  if (deferredValue && isDeferredError(deferredValue)) {
+    return deferredValue;
+  } // If this was a render error, we put it in a RouteError context inside
   // of RenderErrorBoundary
 
+
   if (error) {
     return error;
   }
@@ -760,6 +795,14 @@ function useRouteError() {
 
   return (_state$errors = state.errors) == null ? void 0 : _state$errors[thisRoute.route.id];
 }
+
+/**
+ * Returns the happy-path data from the nearest ancestor <Deferred /> value
+ */
+function useDeferredData() {
+  let value = React.useContext(DeferredContext);
+  return value;
+}
 const alreadyWarned = {};
 
 function warningOnce(key, cond, message) {
@@ -774,21 +817,13 @@ function warningOnce(key, cond, message) {
 // to be unmounted/remounted at runtime.
 
 let routerSingleton;
-/**
- * Unit-testing-only function to reset the router between tests
- * @private
- */
-
-function _resetModuleScope() {
-  // @ts-expect-error
-  routerSingleton = null;
-}
 /**
  * @private
  */
 
 function useRenderDataRouter(_ref) {
   let {
+    basename,
     children,
     fallbackElement,
     routes,
@@ -827,6 +862,7 @@ function useRenderDataRouter(_ref) {
   }, /*#__PURE__*/React.createElement(DataRouterStateContext.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(Router, {
+    basename: basename,
     location: state.location,
     navigationType: state.historyAction,
     navigator: navigator
@@ -837,6 +873,7 @@ function useRenderDataRouter(_ref) {
 }
 function DataMemoryRouter(_ref2) {
   let {
+    basename,
     children,
     initialEntries,
     initialIndex,
@@ -845,10 +882,12 @@ function DataMemoryRouter(_ref2) {
     routes
   } = _ref2;
   return useRenderDataRouter({
+    basename,
     children,
     fallbackElement,
     routes,
     createRouter: routes => createMemoryRouter({
+      basename,
       initialEntries,
       initialIndex,
       routes,
@@ -856,12 +895,12 @@ function DataMemoryRouter(_ref2) {
     })
   });
 }
+
 /**
  * A <Router> that stores all entries in memory.
  *
  * @see https://reactrouter.com/docs/en/v6/routers/memory-router
  */
-
 function MemoryRouter(_ref3) {
   let {
     basename,
@@ -893,6 +932,7 @@ function MemoryRouter(_ref3) {
     navigator: history
   });
 }
+
 /**
  * Changes the current location.
  *
@@ -902,7 +942,6 @@ function MemoryRouter(_ref3) {
  *
  * @see https://reactrouter.com/docs/en/v6/components/navigate
  */
-
 function Navigate(_ref4) {
   let {
     to,
@@ -922,24 +961,25 @@ function Navigate(_ref4) {
   });
   return null;
 }
+
 /**
  * Renders the child route's element, if there is one.
  *
  * @see https://reactrouter.com/docs/en/v6/components/outlet
  */
-
 function Outlet(props) {
   return useOutlet(props.context);
 }
+
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
  * @see https://reactrouter.com/docs/en/v6/components/route
  */
-
 function Route(_props) {
   process.env.NODE_ENV !== "production" ? invariant(false, "A <Route> is only ever to be used as the child of <Routes> element, " + "never rendered directly. Please wrap your <Route> in a <Routes>.") : invariant(false) ;
 }
+
 /**
  * Provides location context for the rest of the app.
  *
@@ -949,7 +989,6 @@ function Route(_props) {
  *
  * @see https://reactrouter.com/docs/en/v6/routers/router
  */
-
 function Router(_ref5) {
   let {
     basename: basenameProp = "/",
@@ -959,8 +998,10 @@ function Router(_ref5) {
     navigator,
     static: staticProp = false
   } = _ref5;
-  !!useInRouterContext() ? process.env.NODE_ENV !== "production" ? invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.") : invariant(false) : void 0;
-  let basename = normalizePathname(basenameProp);
+  !!useInRouterContext() ? process.env.NODE_ENV !== "production" ? invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.") : invariant(false) : void 0; // Preserve trailing slashes on basename, so we can let the user control
+  // the enforcement of trailing slashes throughout the app
+
+  let basename = basenameProp.replace(/^\/*/, "/");
   let navigationContext = React.useMemo(() => ({
     basename,
     navigator,
@@ -1009,13 +1050,13 @@ function Router(_ref5) {
     }
   }));
 }
+
 /**
  * A container for a nested tree of <Route> elements that renders the branch
  * that best matches the current location.
  *
  * @see https://reactrouter.com/docs/en/v6/components/routes
  */
-
 function Routes(_ref6) {
   let {
     children,
@@ -1023,13 +1064,13 @@ function Routes(_ref6) {
   } = _ref6;
   return useRoutes(createRoutesFromChildren(children), location);
 }
+
 /**
  * @private
  * Used as an extension to <Routes> and accepts a manual `routes` array to be
  * instead of using JSX children.  Extracted to it's own component to avoid
  * conditional usage of `useRoutes` if we have to render a `fallbackElement`
  */
-
 function DataRoutes(_ref7) {
   let {
     children,
@@ -1037,6 +1078,68 @@ function DataRoutes(_ref7) {
     routes
   } = _ref7;
   return useRoutes(routes || createRoutesFromChildren(children), location);
+}
+
+/**
+ * Component to use for rendering lazily loaded data from returning deferred()
+ * in a loader function
+ */
+function Deferred(_ref8) {
+  let {
+    children,
+    value,
+    fallback,
+    errorElement
+  } = _ref8;
+  return /*#__PURE__*/React.createElement(DeferredContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: fallback
+  }, /*#__PURE__*/React.createElement(DeferredWrapper, {
+    errorElement: errorElement
+  }, typeof children === "function" ? /*#__PURE__*/React.createElement(ResolveDeferred, {
+    children: children
+  }) : children)));
+}
+
+/**
+ * @private
+ * Internal wrapper to handle re-throwing the promise to trigger the Suspense
+ * fallback, or rendering the children/errorElement once the promise resolves
+ * or rejects
+ */
+function DeferredWrapper(_ref9) {
+  let {
+    children,
+    errorElement
+  } = _ref9;
+  let value = React.useContext(DeferredContext);
+
+  if (value instanceof Promise) {
+    // throw to the suspense boundary
+    throw value;
+  }
+
+  if (isDeferredError(value)) {
+    if (errorElement) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, errorElement);
+    } else {
+      // Throw to the nearest route-level error boundary
+      throw value;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}
+
+/**
+ * @private
+ */
+function ResolveDeferred(_ref10) {
+  let {
+    children
+  } = _ref10;
+  return children(useDeferredData());
 } ///////////////////////////////////////////////////////////////////////////////
 // UTILS
 ///////////////////////////////////////////////////////////////////////////////
@@ -1049,7 +1152,6 @@ function DataRoutes(_ref7) {
  * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children
  */
 
-
 function createRoutesFromChildren(children, parentPath) {
   if (parentPath === void 0) {
     parentPath = [];
@@ -1100,5 +1202,5 @@ function renderMatches(matches) {
   return _renderMatches(matches);
 }
 
-export { DataMemoryRouter, MemoryRouter, Navigate, Outlet, Route, Router, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, _resetModuleScope as UNSAFE_resetModuleScope, createRoutesFromChildren, renderMatches, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
+export { DataMemoryRouter, Deferred, MemoryRouter, Navigate, Outlet, Route, Router, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, createRoutesFromChildren, renderMatches, useActionData, useDeferredData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
 //# sourceMappingURL=index.js.map