react-router 0.0.0-experimental-35fa15e5 → 0.0.0-experimental-8bb3ffdf

package/dist/umd/react-router.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-35fa15e5
+ * React Router v0.0.0-experimental-8bb3ffdf
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -226,6 +226,7 @@
     let dataRouterContext = React__namespace.useContext(DataRouterContext);
     let {
       basename,
+      future,
       navigator
     } = React__namespace.useContext(NavigationContext);
     let {
@@ -234,7 +235,7 @@
     let {
       pathname: locationPathname
     } = useLocation();
-    let routePathnamesJson = JSON.stringify(router.UNSAFE_getResolveToMatches(matches));
+    let routePathnamesJson = JSON.stringify(router.UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath));
     let activeRef = React__namespace.useRef(false);
     useIsomorphicLayoutEffect(() => {
       activeRef.current = true;
@@ -317,13 +318,16 @@
     let {
       relative
     } = _temp2 === void 0 ? {} : _temp2;
+    let {
+      future
+    } = React__namespace.useContext(NavigationContext);
     let {
       matches
     } = React__namespace.useContext(RouteContext);
     let {
       pathname: locationPathname
     } = useLocation();
-    let routePathnamesJson = JSON.stringify(router.UNSAFE_getResolveToMatches(matches));
+    let routePathnamesJson = JSON.stringify(router.UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath));
     return React__namespace.useMemo(() => router.resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, relative === "path"), [to, routePathnamesJson, locationPathname, relative]);
   }
 
@@ -396,7 +400,7 @@
     });
     {
       router.UNSAFE_warning(parentRoute || matches != null, "No routes matched location \"" + location.pathname + location.search + location.hash + "\" ") ;
-      router.UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" " + "does not have an element or Component. This means it will render an <Outlet /> with a " + "null value by default resulting in an \"empty\" page.") ;
+      router.UNSAFE_warning(matches == null || matches[matches.length - 1].route.element !== undefined || matches[matches.length - 1].route.Component !== undefined || matches[matches.length - 1].route.lazy !== undefined, "Matched leaf route at location \"" + location.pathname + location.search + location.hash + "\" " + "does not have an element or Component. This means it will render an <Outlet /> with a " + "null value by default resulting in an \"empty\" page.") ;
     }
     let renderedMatches = _renderMatches(matches && matches.map(match => Object.assign({}, match, {
       params: Object.assign({}, parentParams, match.params),
@@ -494,7 +498,7 @@
       // this because the error provided from the app state may be cleared without
       // the location changing.
       return {
-        error: props.error || state.error,
+        error: props.error !== undefined ? props.error : state.error,
         location: state.location,
         revalidation: props.revalidation || state.revalidation
       };
@@ -503,7 +507,7 @@
       console.error("React Router caught the following error during render", error, errorInfo);
     }
     render() {
-      return this.state.error ? /*#__PURE__*/React__namespace.createElement(RouteContext.Provider, {
+      return this.state.error !== undefined ? /*#__PURE__*/React__namespace.createElement(RouteContext.Provider, {
         value: this.props.routeContext
       }, /*#__PURE__*/React__namespace.createElement(RouteErrorContext.Provider, {
         value: this.state.error,
@@ -570,17 +574,24 @@
         if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
           fallbackIndex = i;
         }
-        if (match.route.loader && match.route.id && dataRouterState.loaderData[match.route.id] === undefined && (!dataRouterState.errors || dataRouterState.errors[match.route.id] === undefined)) {
-          // We found the first route without data/errors which means it's loader
-          // still needs to run.  Flag that we need to render a fallback and
-          // render up until the appropriate fallback
-          renderFallback = true;
-          if (fallbackIndex >= 0) {
-            renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
-          } else {
-            renderedMatches = [renderedMatches[0]];
+        if (match.route.id) {
+          let {
+            loaderData,
+            errors
+          } = dataRouterState;
+          let needsToRunLoader = match.route.loader && loaderData[match.route.id] === undefined && (!errors || errors[match.route.id] === undefined);
+          if (match.route.lazy || needsToRunLoader) {
+            // We found the first route that's not ready to render (waiting on
+            // lazy, or has a loader that hasn't run yet).  Flag that we need to
+            // render a fallback and render up until the appropriate fallback
+            renderFallback = true;
+            if (fallbackIndex >= 0) {
+              renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
+            } else {
+              renderedMatches = [renderedMatches[0]];
+            }
+            break;
           }
-          break;
         }
       }
     }
@@ -591,7 +602,7 @@
       let errorElement = null;
       let hydrateFallbackElement = null;
       if (dataRouterState) {
-        error = errors && match.route.id ? errors[match.route.id] : null;
+        error = errors && match.route.id ? errors[match.route.id] : undefined;
         errorElement = match.route.errorElement || defaultErrorElement;
         if (renderFallback) {
           if (fallbackIndex < 0 && index === 0) {
@@ -781,7 +792,7 @@
 
     // If this was a render error, we put it in a RouteError context inside
     // of RenderErrorBoundary
-    if (error) {
+    if (error !== undefined) {
       return error;
     }
 
@@ -958,7 +969,7 @@
     // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
     React__namespace.useLayoutEffect(() => router$1.subscribe(setState), [router$1, setState]);
     React__namespace.useEffect(() => {
-      router.UNSAFE_warning(fallbackElement == null || !router$1.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using `v7_partialHydration`") ;
+      router.UNSAFE_warning(fallbackElement == null || !router$1.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using " + "`v7_partialHydration`, use a `HydrateFallback` component instead") ;
       // Only log this once on initial mount
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -1000,8 +1011,11 @@
       basename: basename,
       location: state.location,
       navigationType: state.historyAction,
-      navigator: navigator
-    }, state.initialized ? /*#__PURE__*/React__namespace.createElement(DataRoutes, {
+      navigator: navigator,
+      future: {
+        v7_relativeSplatPath: router$1.future.v7_relativeSplatPath
+      }
+    }, state.initialized || router$1.future.v7_partialHydration ? /*#__PURE__*/React__namespace.createElement(DataRoutes, {
       routes: router$1.routes,
       future: router$1.future,
       state: state
@@ -1053,7 +1067,8 @@
       children: children,
       location: state.location,
       navigationType: state.action,
-      navigator: history
+      navigator: history,
+      future: future
     });
   }
   /**
@@ -1075,7 +1090,11 @@
     !useInRouterContext() ? router.UNSAFE_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.")  : void 0;
-    router.UNSAFE_warning(!React__namespace.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.") ;
+    let {
+      future,
+      static: isStatic
+    } = React__namespace.useContext(NavigationContext);
+    router.UNSAFE_warning(!isStatic, "<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.") ;
     let {
       matches
     } = React__namespace.useContext(RouteContext);
@@ -1086,7 +1105,7 @@
 
     // Resolve the path outside of the effect so that when effects run twice in
     // StrictMode they navigate to the same place
-    let path = router.resolveTo(to, router.UNSAFE_getResolveToMatches(matches), locationPathname, relative === "path");
+    let path = router.resolveTo(to, router.UNSAFE_getResolveToMatches(matches, future.v7_relativeSplatPath), locationPathname, relative === "path");
     let jsonPath = JSON.stringify(path);
     React__namespace.useEffect(() => navigate(JSON.parse(jsonPath), {
       replace,
@@ -1127,7 +1146,8 @@
       location: locationProp,
       navigationType = router.Action.Pop,
       navigator,
-      static: staticProp = false
+      static: staticProp = false,
+      future
     } = _ref5;
     !!useInRouterContext() ? router.UNSAFE_invariant(false, "You cannot render a <Router> inside another <Router>." + " You should never have more than one in your app.")  : void 0;
 
@@ -1137,8 +1157,11 @@
     let navigationContext = React__namespace.useMemo(() => ({
       basename,
       navigator,
-      static: staticProp
-    }), [basename, navigator, staticProp]);
+      static: staticProp,
+      future: _extends({
+        v7_relativeSplatPath: false
+      }, future)
+    }), [basename, future, navigator, staticProp]);
     if (typeof locationProp === "string") {
       locationProp = router.parsePath(locationProp);
     }