react-router 6.4.0-pre.8 → 6.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router v6.4.0-pre.8
+ * React Router v6.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,10 +8,27 @@
  *
  * @license MIT
  */
-import { invariant, resolveTo, getToPathname, joinPaths, matchPath, warning, parsePath, matchRoutes, isRouteErrorResponse, createMemoryHistory, Action, 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, Action, isRouteErrorResponse, createMemoryHistory, stripBasename, AbortedDeferredError, createRouter } from '@remix-run/router';
+export { AbortedDeferredError, Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from '@remix-run/router';
 import * as React from 'react';
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -188,10 +205,15 @@ function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
 const canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
 const isServerEnvironment = !canUseDOM;
 const shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore$2;
-const useSyncExternalStore = "useSyncExternalStore" in React ? // @ts-expect-error
-(module => module.useSyncExternalStore)(React) : shim;
+const useSyncExternalStore = "useSyncExternalStore" in React ? (module => module.useSyncExternalStore)(React) : shim;
 
 // Contexts for data routers
+const DataStaticRouterContext = /*#__PURE__*/React.createContext(null);
+
+if (process.env.NODE_ENV !== "production") {
+  DataStaticRouterContext.displayName = "DataStaticRouterContext";
+}
+
 const DataRouterContext = /*#__PURE__*/React.createContext(null);
 
 if (process.env.NODE_ENV !== "production") {
@@ -204,6 +226,12 @@ if (process.env.NODE_ENV !== "production") {
   DataRouterStateContext.displayName = "DataRouterState";
 }
 
+const AwaitContext = /*#__PURE__*/React.createContext(null);
+
+if (process.env.NODE_ENV !== "production") {
+  AwaitContext.displayName = "Await";
+}
+
 const NavigationContext = /*#__PURE__*/React.createContext(null);
 
 if (process.env.NODE_ENV !== "production") {
@@ -238,7 +266,10 @@ if (process.env.NODE_ENV !== "production") {
  * @see https://reactrouter.com/docs/en/v6/hooks/use-href
  */
 
-function useHref(to) {
+function useHref(to, _temp) {
+  let {
+    relative
+  } = _temp === void 0 ? {} : _temp;
   !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.
   "useHref() may be used only in the context of a <Router> component.") : invariant(false) : void 0;
@@ -250,23 +281,16 @@ function useHref(to) {
     hash,
     pathname,
     search
-  } = useResolvedPath(to);
-  let joinedPathname = pathname;
+  } = useResolvedPath(to, {
+    relative
+  });
+  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); // Only append a trailing slash to the raw basename if the basename doesn't
-    // already have one and this wasn't specifically a route to "".  This
-    // allows folks to control the trailing slash behavior when using a basename
-
-    let appendSlash = !basename.endsWith("/") && to !== "" && (to == null ? void 0 : to.pathname) !== "" && toPathname != null && toPathname.endsWith("/");
-
-    if (pathname !== "/") {
-      joinedPathname = joinPaths([basename, pathname]);
-    } else if (appendSlash) {
-      joinedPathname = basename + "/";
-    } else {
-      joinedPathname = basename;
-    }
+    joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
   }
 
   return navigator.createHref({
@@ -396,14 +420,13 @@ function useNavigate() {
       return;
     }
 
-    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname);
+    let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, options.relative === "path"); // 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 !== "/") {
-      // If this was a blank path, just use the basename directly, this gives
-      // the user control over trailing slash behavior
-      let toPath = typeof to === "string" ? parsePath(to) : to;
-      let isBlankPath = toPath.pathname == null || toPath.pathname === "";
-      path.pathname = isBlankPath ? basename : joinPaths([basename, path.pathname]);
+      path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
     }
 
     (!!options.replace ? navigator.replace : navigator.push)(path, options.state, options);
@@ -458,7 +481,10 @@ function useParams() {
  * @see https://reactrouter.com/docs/en/v6/hooks/use-resolved-path
  */
 
-function useResolvedPath(to) {
+function useResolvedPath(to, _temp2) {
+  let {
+    relative
+  } = _temp2 === void 0 ? {} : _temp2;
   let {
     matches
   } = React.useContext(RouteContext);
@@ -466,7 +492,7 @@ function useResolvedPath(to) {
     pathname: locationPathname
   } = useLocation();
   let routePathnamesJson = JSON.stringify(getPathContributingMatches(matches).map(match => match.pathnameBase));
-  return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname), [to, routePathnamesJson, locationPathname]);
+  return React.useMemo(() => resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
 }
 /**
  * Returns the element of the route that matched the current location, prepared
@@ -540,16 +566,37 @@ function useRoutes(routes, locationArg) {
     process.env.NODE_ENV !== "production" ? warning(matches == null || matches[matches.length - 1].route.element !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" does not have an element. " + "This means it will render an <Outlet /> with a null value by default resulting in an \"empty\" page.") : void 0;
   }
 
-  return _renderMatches(matches && matches.map(match => Object.assign({}, match, {
+  let renderedMatches = _renderMatches(matches && matches.map(match => Object.assign({}, match, {
     params: Object.assign({}, parentParams, match.params),
     pathname: joinPaths([parentPathnameBase, match.pathname]),
     pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([parentPathnameBase, match.pathnameBase])
-  })), parentMatches, dataRouterStateContext || undefined);
+  })), parentMatches, dataRouterStateContext || undefined); // When a user passes in a `locationArg`, the associated routes need to
+  // be wrapped in a new `LocationContext.Provider` in order for `useLocation`
+  // to use the scoped location instead of the global location.
+
+
+  if (locationArg) {
+    return /*#__PURE__*/React.createElement(LocationContext.Provider, {
+      value: {
+        location: _extends({
+          pathname: "/",
+          search: "",
+          hash: "",
+          state: null,
+          key: "default"
+        }, location),
+        navigationType: Action.Pop
+      }
+    }, renderedMatches);
+  }
+
+  return renderedMatches;
 }
 
 function DefaultErrorElement() {
   let error = useRouteError();
-  let message = isRouteErrorResponse(error) ? error.status + " " + error.statusText : (error == null ? void 0 : error.message) || JSON.stringify(error);
+  let message = isRouteErrorResponse(error) ? error.status + " " + error.statusText : error instanceof Error ? error.message : JSON.stringify(error);
+  let stack = error instanceof Error ? error.stack : null;
   let lightgrey = "rgba(200,200,200, 0.5)";
   let preStyles = {
     padding: "0.5rem",
@@ -563,9 +610,9 @@ function DefaultErrorElement() {
     style: {
       fontStyle: "italic"
     }
-  }, message), error != null && error.stack ? /*#__PURE__*/React.createElement("pre", {
+  }, message), 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\xA0", /*#__PURE__*/React.createElement("code", {
+  }, 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\xA0", /*#__PURE__*/React.createElement("code", {
     style: codeStyles
@@ -625,6 +672,25 @@ class RenderErrorBoundary extends React.Component {
   }
 
 }
+
+function RenderedRoute(_ref) {
+  let {
+    routeContext,
+    match,
+    children
+  } = _ref;
+  let dataStaticRouterContext = React.useContext(DataStaticRouterContext); // Track how deep we got in our render pass to emulate SSR componentDidCatch
+  // in a DataStaticRouter
+
+  if (dataStaticRouterContext && match.route.errorElement) {
+    dataStaticRouterContext._deepestRenderedBoundaryId = match.route.id;
+  }
+
+  return /*#__PURE__*/React.createElement(RouteContext.Provider, {
+    value: routeContext
+  }, children);
+}
+
 function _renderMatches(matches, parentMatches, dataRouterState) {
   if (parentMatches === void 0) {
     parentMatches = [];
@@ -655,13 +721,13 @@ function _renderMatches(matches, parentMatches, dataRouterState) {
 
     let errorElement = dataRouterState ? match.route.errorElement || /*#__PURE__*/React.createElement(DefaultErrorElement, null) : null;
 
-    let getChildren = () => /*#__PURE__*/React.createElement(RouteContext.Provider, {
-      children: error ? errorElement : match.route.element !== undefined ? match.route.element : outlet,
-      value: {
+    let getChildren = () => /*#__PURE__*/React.createElement(RenderedRoute, {
+      match: match,
+      routeContext: {
         outlet,
         matches: parentMatches.concat(renderedMatches.slice(0, index + 1))
       }
-    }); // Only wrap in an error boundary within data router usages when we have an
+    }, error ? errorElement : match.route.element !== undefined ? match.route.element : outlet); // Only wrap in an error boundary within data router usages when we have an
     // errorElement on this route.  Otherwise let it bubble up to an ancestor
     // errorElement
 
@@ -688,7 +754,7 @@ var DataRouterHook;
 
 function useDataRouterState(hookName) {
   let state = React.useContext(DataRouterStateContext);
-  !state ? process.env.NODE_ENV !== "production" ? invariant(false, hookName + " must be used within a DataRouter") : invariant(false) : void 0;
+  !state ? process.env.NODE_ENV !== "production" ? invariant(false, hookName + " must be used within a DataRouterStateContext") : invariant(false) : void 0;
   return state;
 }
 /**
@@ -707,11 +773,11 @@ function useNavigation() {
  */
 
 function useRevalidator() {
-  let router = React.useContext(DataRouterContext);
-  !router ? process.env.NODE_ENV !== "production" ? invariant(false, "useRevalidator must be used within a DataRouter") : invariant(false) : void 0;
+  let dataRouterContext = React.useContext(DataRouterContext);
+  !dataRouterContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useRevalidator must be used within a DataRouterContext") : invariant(false) : void 0;
   let state = useDataRouterState(DataRouterHook.UseRevalidator);
   return {
-    revalidate: router.revalidate,
+    revalidate: dataRouterContext.router.revalidate,
     state: state.revalidation
   };
 }
@@ -729,7 +795,10 @@ function useMatches() {
     let {
       pathname,
       params
-    } = match;
+    } = match; // Note: This structure matches that created by createUseMatchesMatch
+    // in the @remix-run/router , so if you change this please also change
+    // that :)  Eventually we'll DRY this up
+
     return {
       id: match.route.id,
       pathname,
@@ -793,6 +862,22 @@ function useRouteError() {
 
   return (_state$errors = state.errors) == null ? void 0 : _state$errors[thisRoute.route.id];
 }
+/**
+ * Returns the happy-path data from the nearest ancestor <Await /> value
+ */
+
+function useAsyncValue() {
+  let value = React.useContext(AwaitContext);
+  return value == null ? void 0 : value._data;
+}
+/**
+ * Returns the error from the nearest ancestor <Await /> value
+ */
+
+function useAsyncError() {
+  let value = React.useContext(AwaitContext);
+  return value == null ? void 0 : value._error;
+}
 const alreadyWarned = {};
 
 function warningOnce(key, cond, message) {
@@ -802,83 +887,51 @@ function warningOnce(key, cond, message) {
   }
 }
 
-// to avoid issues w.r.t. dual initialization fetches in concurrent rendering.
-// Data router apps are expected to have a static route tree and are not intended
-// to be unmounted/remounted at runtime.
-
-let routerSingleton;
 /**
- * @private
+ * Given a Remix Router instance, render the appropriate UI
  */
-
-function useRenderDataRouter(_ref) {
+function RouterProvider(_ref) {
   let {
-    children,
     fallbackElement,
-    routes,
-    createRouter
+    router
   } = _ref;
-
-  if (!routerSingleton) {
-    routerSingleton = createRouter(routes || createRoutesFromChildren(children)).initialize();
-  }
-
-  let router = routerSingleton; // Sync router state to our component state to force re-renders
-
-  let state = useSyncExternalStore(router.subscribe, () => router.state);
+  // Sync router state to our component state to force re-renders
+  let state = useSyncExternalStore(router.subscribe, () => router.state, // We have to provide this so React@18 doesn't complain during hydration,
+  // but we pass our serialized hydration data into the router so state here
+  // is already synced with what the server saw
+  () => router.state);
   let navigator = React.useMemo(() => {
     return {
       createHref: router.createHref,
       go: n => router.navigate(n),
       push: (to, state, opts) => router.navigate(to, {
         state,
-        resetScroll: opts == null ? void 0 : opts.resetScroll
+        preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
       }),
       replace: (to, state, opts) => router.navigate(to, {
         replace: true,
         state,
-        resetScroll: opts == null ? void 0 : opts.resetScroll
+        preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
       })
     };
   }, [router]);
-
-  if (!state.initialized) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, fallbackElement);
-  }
-
+  let basename = router.basename || "/";
   return /*#__PURE__*/React.createElement(DataRouterContext.Provider, {
-    value: router
+    value: {
+      router,
+      navigator,
+      static: false,
+      // Do we need this?
+      basename
+    }
   }, /*#__PURE__*/React.createElement(DataRouterStateContext.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(Router, {
-    location: state.location,
-    navigationType: state.historyAction,
+    basename: router.basename,
+    location: router.state.location,
+    navigationType: router.state.historyAction,
     navigator: navigator
-  }, /*#__PURE__*/React.createElement(DataRoutes, {
-    routes: routes,
-    children: children
-  }))));
-}
-function DataMemoryRouter(_ref2) {
-  let {
-    children,
-    initialEntries,
-    initialIndex,
-    hydrationData,
-    fallbackElement,
-    routes
-  } = _ref2;
-  return useRenderDataRouter({
-    children,
-    fallbackElement,
-    routes,
-    createRouter: routes => createMemoryRouter({
-      initialEntries,
-      initialIndex,
-      routes,
-      hydrationData
-    })
-  });
+  }, router.state.initialized ? /*#__PURE__*/React.createElement(Routes, null) : fallbackElement)));
 }
 
 /**
@@ -886,13 +939,13 @@ function DataMemoryRouter(_ref2) {
  *
  * @see https://reactrouter.com/docs/en/v6/routers/memory-router
  */
-function MemoryRouter(_ref3) {
+function MemoryRouter(_ref2) {
   let {
     basename,
     children,
     initialEntries,
     initialIndex
-  } = _ref3;
+  } = _ref2;
   let historyRef = React.useRef();
 
   if (historyRef.current == null) {
@@ -927,21 +980,31 @@ function MemoryRouter(_ref3) {
  *
  * @see https://reactrouter.com/docs/en/v6/components/navigate
  */
-function Navigate(_ref4) {
+function Navigate(_ref3) {
   let {
     to,
     replace,
-    state
-  } = _ref4;
+    state,
+    relative
+  } = _ref3;
   !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.
   "<Navigate> may be used only in the context of a <Router> component.") : invariant(false) : void 0;
   process.env.NODE_ENV !== "production" ? warning(!React.useContext(NavigationContext).static, "<Navigate> must not be used on the initial render in a <StaticRouter>. " + "This is a no-op, but you should modify your code so the <Navigate> is " + "only ever rendered in response to some user interaction or state change.") : void 0;
+  let dataRouterState = React.useContext(DataRouterStateContext);
   let navigate = useNavigate();
   React.useEffect(() => {
+    // Avoid kicking off multiple navigations if we're in the middle of a
+    // data-router navigation, since components get re-rendered when we enter
+    // a submitting/loading state
+    if (dataRouterState && dataRouterState.navigation.state !== "idle") {
+      return;
+    }
+
     navigate(to, {
       replace,
-      state
+      state,
+      relative
     });
   });
   return null;
@@ -974,7 +1037,7 @@ function Route(_props) {
  *
  * @see https://reactrouter.com/docs/en/v6/routers/router
  */
-function Router(_ref5) {
+function Router(_ref4) {
   let {
     basename: basenameProp = "/",
     children = null,
@@ -982,7 +1045,7 @@ function Router(_ref5) {
     navigationType = Action.Pop,
     navigator,
     static: staticProp = false
-  } = _ref5;
+  } = _ref4;
   !!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
 
@@ -1042,27 +1105,158 @@ function Router(_ref5) {
  *
  * @see https://reactrouter.com/docs/en/v6/components/routes
  */
-function Routes(_ref6) {
+function Routes(_ref5) {
   let {
     children,
     location
+  } = _ref5;
+  let dataRouterContext = React.useContext(DataRouterContext); // When in a DataRouterContext _without_ children, we use the router routes
+  // directly.  If we have children, then we're in a descendant tree and we
+  // need to use child routes.
+
+  let routes = dataRouterContext && !children ? dataRouterContext.router.routes : createRoutesFromChildren(children);
+  return useRoutes(routes, location);
+}
+
+/**
+ * Component to use for rendering lazily loaded data from returning defer()
+ * in a loader function
+ */
+function Await(_ref6) {
+  let {
+    children,
+    errorElement,
+    resolve
   } = _ref6;
-  return useRoutes(createRoutesFromChildren(children), location);
+  return /*#__PURE__*/React.createElement(AwaitErrorBoundary, {
+    resolve: resolve,
+    errorElement: errorElement
+  }, /*#__PURE__*/React.createElement(ResolveAwait, null, children));
 }
+var AwaitRenderStatus;
+
+(function (AwaitRenderStatus) {
+  AwaitRenderStatus[AwaitRenderStatus["pending"] = 0] = "pending";
+  AwaitRenderStatus[AwaitRenderStatus["success"] = 1] = "success";
+  AwaitRenderStatus[AwaitRenderStatus["error"] = 2] = "error";
+})(AwaitRenderStatus || (AwaitRenderStatus = {}));
+
+const neverSettledPromise = new Promise(() => {});
+
+class AwaitErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("<Await> caught the following error during render", error, errorInfo);
+  }
+
+  render() {
+    let {
+      children,
+      errorElement,
+      resolve
+    } = this.props;
+    let promise = null;
+    let status = AwaitRenderStatus.pending;
+
+    if (!(resolve instanceof Promise)) {
+      // Didn't get a promise - provide as a resolved promise
+      status = AwaitRenderStatus.success;
+      promise = Promise.resolve();
+      Object.defineProperty(promise, "_tracked", {
+        get: () => true
+      });
+      Object.defineProperty(promise, "_data", {
+        get: () => resolve
+      });
+    } else if (this.state.error) {
+      // Caught a render error, provide it as a rejected promise
+      status = AwaitRenderStatus.error;
+      let renderError = this.state.error;
+      promise = Promise.reject().catch(() => {}); // Avoid unhandled rejection warnings
+
+      Object.defineProperty(promise, "_tracked", {
+        get: () => true
+      });
+      Object.defineProperty(promise, "_error", {
+        get: () => renderError
+      });
+    } else if (resolve._tracked) {
+      // Already tracked promise - check contents
+      promise = resolve;
+      status = promise._error !== undefined ? AwaitRenderStatus.error : promise._data !== undefined ? AwaitRenderStatus.success : AwaitRenderStatus.pending;
+    } else {
+      // Raw (untracked) promise - track it
+      status = AwaitRenderStatus.pending;
+      Object.defineProperty(resolve, "_tracked", {
+        get: () => true
+      });
+      promise = resolve.then(data => Object.defineProperty(resolve, "_data", {
+        get: () => data
+      }), error => Object.defineProperty(resolve, "_error", {
+        get: () => error
+      }));
+    }
 
+    if (status === AwaitRenderStatus.error && promise._error instanceof AbortedDeferredError) {
+      // Freeze the UI by throwing a never resolved promise
+      throw neverSettledPromise;
+    }
+
+    if (status === AwaitRenderStatus.error && !errorElement) {
+      // No errorElement, throw to the nearest route-level error boundary
+      throw promise._error;
+    }
+
+    if (status === AwaitRenderStatus.error) {
+      // Render via our errorElement
+      return /*#__PURE__*/React.createElement(AwaitContext.Provider, {
+        value: promise,
+        children: errorElement
+      });
+    }
+
+    if (status === AwaitRenderStatus.success) {
+      // Render children with resolved value
+      return /*#__PURE__*/React.createElement(AwaitContext.Provider, {
+        value: promise,
+        children: children
+      });
+    } // Throw to the suspense boundary
+
+
+    throw promise;
+  }
+
+}
 /**
  * @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`
+ * Indirection to leverage useAsyncValue for a render-prop API on <Await>
  */
-function DataRoutes(_ref7) {
+
+
+function ResolveAwait(_ref7) {
   let {
-    children,
-    location,
-    routes
+    children
   } = _ref7;
-  return useRoutes(routes || createRoutesFromChildren(children), location);
+  let data = useAsyncValue();
+
+  if (typeof children === "function") {
+    return children(data);
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 } ///////////////////////////////////////////////////////////////////////////////
 // UTILS
 ///////////////////////////////////////////////////////////////////////////////
@@ -1106,6 +1300,7 @@ function createRoutesFromChildren(children, parentPath) {
       loader: element.props.loader,
       action: element.props.action,
       errorElement: element.props.errorElement,
+      hasErrorBoundary: element.props.errorElement != null,
       shouldRevalidate: element.props.shouldRevalidate,
       handle: element.props.handle
     };
@@ -1125,6 +1320,39 @@ function createRoutesFromChildren(children, parentPath) {
 function renderMatches(matches) {
   return _renderMatches(matches);
 }
+/**
+ * @private
+ * Walk the route tree and add hasErrorBoundary if it's not provided, so that
+ * users providing manual route arrays can just specify errorElement
+ */
+
+function enhanceManualRouteObjects(routes) {
+  return routes.map(route => {
+    let routeClone = _extends({}, route);
+
+    if (routeClone.hasErrorBoundary == null) {
+      routeClone.hasErrorBoundary = routeClone.errorElement != null;
+    }
+
+    if (routeClone.children) {
+      routeClone.children = enhanceManualRouteObjects(routeClone.children);
+    }
+
+    return routeClone;
+  });
+}
+
+function createMemoryRouter(routes, opts) {
+  return createRouter({
+    basename: opts == null ? void 0 : opts.basename,
+    history: createMemoryHistory({
+      initialEntries: opts == null ? void 0 : opts.initialEntries,
+      initialIndex: opts == null ? void 0 : opts.initialIndex
+    }),
+    hydrationData: opts == null ? void 0 : opts.hydrationData,
+    routes: enhanceManualRouteObjects(routes)
+  }).initialize();
+} ///////////////////////////////////////////////////////////////////////////////
 
-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, createRoutesFromChildren, renderMatches, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useRenderDataRouter, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
+export { Await, MemoryRouter, Navigate, Outlet, Route, Router, RouterProvider, Routes, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, DataStaticRouterContext as UNSAFE_DataStaticRouterContext, LocationContext as UNSAFE_LocationContext, NavigationContext as UNSAFE_NavigationContext, RouteContext as UNSAFE_RouteContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createRoutesFromChildren, createRoutesFromChildren as createRoutesFromElements, renderMatches, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes };
 //# sourceMappingURL=index.js.map