react-router 0.0.0-experimental-e960cf1a → 0.0.0-experimental-a0888892

package/dist/lib/components.d.ts

@@ -107,9 +107,7 @@ export interface RouterProps {
     navigationType?: NavigationType;
     navigator: Navigator;
     static?: boolean;
-    future?: {
-        v7_relativeSplatPath?: boolean;
-    };
+    future?: Partial<Pick<FutureConfig, "v7_relativeSplatPath">>;
 }
 /**
  * Provides location context for the rest of the app.

package/dist/lib/context.d.ts

@@ -47,7 +47,7 @@ export interface RouteMatch<ParamKey extends string = string, RouteObjectType ex
 }
 export interface DataRouteMatch extends RouteMatch<string, DataRouteObject> {
 }
-export interface DataRouterContextObject extends NavigationContextObject {
+export interface DataRouterContextObject extends Omit<NavigationContextObject, "future"> {
     router: Router;
     staticContext?: StaticHandlerContext;
 }

package/dist/main.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e960cf1a
+ * React Router v0.0.0-experimental-a0888892
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/react-router.development.js

@@ -1,5 +1,5 @@
 /**
- * React Router v0.0.0-experimental-e960cf1a
+ * React Router v0.0.0-experimental-a0888892
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -323,13 +323,32 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
     location = locationFromContext;
   }
   let pathname = location.pathname || "/";
-  let remainingPathname = parentPathnameBase === "/" ? pathname : pathname.slice(parentPathnameBase.length) || "/";
+  let remainingPathname = pathname;
+  if (parentPathnameBase !== "/") {
+    // Determine the remaining pathname by removing the # of URL segments the
+    // parentPathnameBase has, instead of removing based on character count.
+    // This is because we can't guarantee that incoming/outgoing encodings/
+    // decodings will match exactly.
+    // We decode paths before matching on a per-segment basis with
+    // decodeURIComponent(), but we re-encode pathnames via `new URL()` so they
+    // match what `window.location.pathname` would reflect.  Those don't 100%
+    // align when it comes to encoded URI characters such as % and &.
+    //
+    // So we may end up with:
+    //   pathname:           "/descendant/a%25b/match"
+    //   parentPathnameBase: "/descendant/a%b"
+    //
+    // And the direct substring removal approach won't work :/
+    let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
+    let segments = pathname.replace(/^\//, "").split("/");
+    remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
+  }
   let matches = matchRoutes(routes, {
     pathname: remainingPathname
   });
   {
     UNSAFE_warning(parentRoute || matches != null, `No routes matched location "${location.pathname}${location.search}${location.hash}" `) ;
-    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.`) ;
+    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),
@@ -487,17 +506,24 @@ function _renderMatches(matches, parentMatches = [], dataRouterState = null, fut
       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: _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;
       }
     }
   }
@@ -851,7 +877,7 @@ function RouterProvider({
   // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
   React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
   React.useEffect(() => {
-    UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using `v7_partialHydration`") ;
+    UNSAFE_warning(fallbackElement == null || !router.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
   }, []);
@@ -876,10 +902,7 @@ function RouterProvider({
     router,
     navigator,
     static: false,
-    basename,
-    future: {
-      v7_relativeSplatPath: router.future.v7_relativeSplatPath
-    }
+    basename
   }), [router, navigator, basename]);
   // The fragment and {null} here are important!  We need them to keep React 18's
   // useId happy when we are server-rendering since we may have a <script> here
@@ -895,8 +918,11 @@ function RouterProvider({
     basename: basename,
     location: state.location,
     navigationType: state.historyAction,
-    navigator: navigator
-  }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
+    navigator: navigator,
+    future: {
+      v7_relativeSplatPath: router.future.v7_relativeSplatPath
+    }
+  }, state.initialized || router.future.v7_partialHydration ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
     future: router.future,
     state: state