@remix-run/router 0.0.0-experimental-e192105b → 0.0.0-experimental-178bc9ee

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # `@remix-run/router`
 
+## 1.12.0
+
+### Minor Changes
+
+- Add `unstable_flushSync` option to `router.navigate` and `router.fetch` to tell the React Router layer to opt-out of `React.startTransition` and into `ReactDOM.flushSync` for state updates ([#11005](https://github.com/remix-run/react-router/pull/11005))
+
+### Patch Changes
+
+- Fix `relative="path"` bug where relative path calculations started from the full location pathname, instead of from the current contextual route pathname. ([#11006](https://github.com/remix-run/react-router/pull/11006))
+
+  ```jsx
+  <Route path="/a">
+    <Route path="/b" element={<Component />}>
+      <Route path="/c" />
+    </Route>
+  </Route>;
+
+  function Component() {
+    return (
+      <>
+        {/* This is now correctly relative to /a/b, not /a/b/c */}
+        <Link to=".." relative="path" />
+        <Outlet />
+      </>
+    );
+  }
+  ```
+
 ## 1.11.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, ErrorResponse, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, UIMatch, V7_FormMethod, } from "./utils";
+export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, ErrorResponse, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathParam, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, UIMatch, V7_FormMethod, } from "./utils";
 export { AbortedDeferredError, defer, generatePath, getToPathname, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, redirect, redirectDocument, resolvePath, resolveTo, stripBasename, } from "./utils";
 export type { BrowserHistory, BrowserHistoryOptions, HashHistory, HashHistoryOptions, History, InitialEntry, Location, MemoryHistory, MemoryHistoryOptions, Path, To, } from "./history";
 export { Action, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, parsePath, } from "./history";
 export * from "./router";
 /** @internal */
 export type { RouteManifest as UNSAFE_RouteManifest } from "./utils";
-export { DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, getPathContributingMatches as UNSAFE_getPathContributingMatches, } from "./utils";
+export { DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, getResolveToMatches as UNSAFE_getResolveToMatches, } from "./utils";
 export { invariant as UNSAFE_invariant, warning as UNSAFE_warning, } from "./history";

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-e192105b
+ * @remix-run/router v0.0.0-experimental-178bc9ee
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1192,6 +1192,13 @@ function getPathContributingMatches(matches) {
   return matches.filter((match, index) => index === 0 || match.route.path && match.route.path.length > 0);
 }
 
+// Return the array of pathnames for the current route matches - used to
+// generate the routePathnames input for resolveTo()
+function getResolveToMatches(matches) {
+  // Use the full pathname for the leaf match so we include splat values for "." links
+  return getPathContributingMatches(matches).map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase);
+}
+
 /**
  * @private
  */
@@ -1221,16 +1228,30 @@ function resolveTo(toArg, routePathnames, locationPathname, isPathRelative) {
   // `to` values that do not provide a pathname. `to` can simply be a search or
   // hash string, in which case we should assume that the navigation is relative
   // to the current location's pathname and *not* the route pathname.
-  if (isPathRelative || toPathname == null) {
+  if (toPathname == null) {
     from = locationPathname;
+  } else if (isPathRelative) {
+    let fromSegments = routePathnames[routePathnames.length - 1].replace(/^\//, "").split("/");
+    if (toPathname.startsWith("..")) {
+      let toSegments = toPathname.split("/");
+
+      // With relative="path", each leading .. segment means "go up one URL segment"
+      while (toSegments[0] === "..") {
+        toSegments.shift();
+        fromSegments.pop();
+      }
+      to.pathname = toSegments.join("/");
+    }
+    from = "/" + fromSegments.join("/");
   } else {
     let routePathnameIndex = routePathnames.length - 1;
     if (toPathname.startsWith("..")) {
       let toSegments = toPathname.split("/");
 
-      // Each leading .. segment means "go up one route" instead of "go up one
-      // URL segment".  This is a key difference from how <a href> works and a
-      // major reason we call this a "to" value instead of a "href".
+      // With relative="route" (the default), each leading .. segment means
+      // "go up one route" instead of "go up one URL segment".  This is a key
+      // difference from how <a href> works and a major reason we call this a
+      // "to" value instead of a "href".
       while (toSegments[0] === "..") {
         toSegments.shift();
         routePathnameIndex -= 1;
@@ -1665,6 +1686,7 @@ function createRouter(init) {
   let future = _extends({
     v7_fetcherPersist: false,
     v7_normalizeFormMethod: false,
+    v7_partialHydration: false,
     v7_prependBasename: false
   }, init.future);
   // Cleanup function for history
@@ -1701,7 +1723,13 @@ function createRouter(init) {
       [route.id]: error
     };
   }
-  let initialized =
+
+  // "Initialized" here really means "Can `RouterProvider` render my route tree?"
+  // Prior to `route.Fallback`, we only had a root `fallbackElement` so we used
+  // `state.initialized` to render that instead of `<DataRoutes>`.  Now that we
+  // support route level fallbacks we can always render and we'll just render
+  // as deep as we have data for and detect the nearest ancestor Fallback
+  let initialized = future.v7_partialHydration ||
   // All initialMatches need to be loaded before we're ready.  If we have lazy
   // functions around still then we'll need to run them in initialize()
   !initialMatches.some(m => m.route.lazy) && (
@@ -1739,9 +1767,6 @@ function createRouter(init) {
   // Should the current navigation enable document.startViewTransition?
   let pendingViewTransitionEnabled = false;
 
-  // Should the current navigation use flushSync for state updates?
-  let pendingFlushSync = false;
-
   // Store applied view transitions so we can apply them on POP
   let appliedViewTransitions = new Map();
 
@@ -1855,8 +1880,6 @@ function createRouter(init) {
             blockers.set(blockerKey, IDLE_BLOCKER);
             updateState({
               blockers
-            }, {
-              flushSync: false
             });
           }
         });
@@ -1878,8 +1901,10 @@ function createRouter(init) {
     // in the normal navigation flow.  For SSR it's expected that lazy modules are
     // resolved prior to router creation since we can't go into a fallbackElement
     // UI for SSR'd apps
-    if (!state.initialized) {
-      startNavigation(Action.Pop, state.location);
+    if (!state.initialized || future.v7_partialHydration && state.matches.some(m => m.route.loader && state.loaderData[m.route.id] === undefined)) {
+      startNavigation(Action.Pop, state.location, {
+        initialHydration: true
+      });
     }
     return router;
   }
@@ -1906,6 +1931,9 @@ function createRouter(init) {
 
   // Update our state and notify the calling context of the change
   function updateState(newState, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
     state = _extends({}, state, newState);
 
     // Prep fetcher cleanup so we can tell the UI which fetcher data entries
@@ -1933,7 +1961,7 @@ function createRouter(init) {
     [...subscribers].forEach(subscriber => subscriber(state, {
       deletedFetchers: deletedFetchersKeys,
       unstable_viewTransitionOpts: opts.viewTransitionOpts,
-      unstable_flushSync: opts.flushSync
+      unstable_flushSync: opts.flushSync === true
     }));
 
     // Remove idle fetchers from state since we only care about in-flight fetchers.
@@ -1948,8 +1976,11 @@ function createRouter(init) {
   // - Location is a required param
   // - Navigation will always be set to IDLE_NAVIGATION
   // - Can pass any other state in newState
-  function completeNavigation(location, newState) {
+  function completeNavigation(location, newState, _temp) {
     var _location$state, _location$state2;
+    let {
+      flushSync
+    } = _temp === void 0 ? {} : _temp;
     // Deduce if we're in a loading/actionReload state:
     // - We have committed actionData in the store
     // - The current navigation was a mutation submission
@@ -2042,14 +2073,13 @@ function createRouter(init) {
       blockers
     }), {
       viewTransitionOpts,
-      flushSync: pendingFlushSync
+      flushSync: flushSync === true
     });
 
     // Reset stateful navigation vars
     pendingAction = Action.Pop;
     pendingPreventScrollReset = false;
     pendingViewTransitionEnabled = false;
-    pendingFlushSync = false;
     isUninterruptedRevalidation = false;
     isRevalidationRequired = false;
     cancelledDeferredRoutes = [];
@@ -2116,8 +2146,6 @@ function createRouter(init) {
           blockers.set(blockerKey, IDLE_BLOCKER);
           updateState({
             blockers
-          }, {
-            flushSync
           });
         }
       });
@@ -2142,8 +2170,6 @@ function createRouter(init) {
     interruptActiveLoads();
     updateState({
       revalidation: "loading"
-    }, {
-      flushSync: false
     });
 
     // If we're currently submitting an action, we don't need to start a new
@@ -2187,10 +2213,10 @@ function createRouter(init) {
     saveScrollPosition(state.location, state.matches);
     pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
     pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
-    pendingFlushSync = (opts && opts.flushSync) === true;
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let loadingNavigation = opts && opts.overrideNavigation;
     let matches = matchRoutes(routesToUse, location, basename);
+    let flushSync = (opts && opts.flushSync) === true;
 
     // Short circuit with a 404 on the root error boundary if we match nothing
     if (!matches) {
@@ -2209,6 +2235,8 @@ function createRouter(init) {
         errors: {
           [route.id]: error
         }
+      }, {
+        flushSync
       });
       return;
     }
@@ -2222,13 +2250,15 @@ function createRouter(init) {
     if (state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
       completeNavigation(location, {
         matches
+      }, {
+        flushSync
       });
       return;
     }
 
     // Create a controller/Request for this navigation
     pendingNavigationController = new AbortController();
-    let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.submission);
+    let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.initialHydration === true, opts && opts.submission);
     let pendingActionData;
     let pendingError;
     if (opts && opts.pendingError) {
@@ -2242,7 +2272,8 @@ function createRouter(init) {
     } else if (opts && opts.submission && isMutationMethod(opts.submission.formMethod)) {
       // Call action if we received an action submission
       let actionOutput = await handleAction(request, location, opts.submission, matches, {
-        replace: opts.replace
+        replace: opts.replace,
+        flushSync
       });
       if (actionOutput.shortCircuited) {
         return;
@@ -2250,6 +2281,7 @@ function createRouter(init) {
       pendingActionData = actionOutput.pendingActionData;
       pendingError = actionOutput.pendingActionError;
       loadingNavigation = getLoadingNavigation(location, opts.submission);
+      flushSync = false;
 
       // Create a GET request for the loaders
       request = new Request(request.url, {
@@ -2262,7 +2294,7 @@ function createRouter(init) {
       shortCircuited,
       loaderData,
       errors
-    } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, pendingActionData, pendingError);
+    } = await handleLoaders(request, location, matches, loadingNavigation, opts && opts.submission, opts && opts.fetcherSubmission, opts && opts.replace, opts && opts.initialHydration === true, flushSync, pendingActionData, pendingError);
     if (shortCircuited) {
       return;
     }
@@ -2294,7 +2326,7 @@ function createRouter(init) {
     updateState({
       navigation
     }, {
-      flushSync: pendingFlushSync
+      flushSync: opts.flushSync === true
     });
 
     // Call our action and get the result
@@ -2369,7 +2401,7 @@ function createRouter(init) {
 
   // Call all applicable loaders for the given matches, handling redirects,
   // errors, etc.
-  async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, pendingActionData, pendingError) {
+  async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, initialHydration, flushSync, pendingActionData, pendingError) {
     // Figure out the right navigation we want to use for data loading
     let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
 
@@ -2377,7 +2409,7 @@ function createRouter(init) {
     // we have it on the loading navigation so use that if available
     let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
     let routesToUse = inFlightDataRoutes || dataRoutes;
-    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError);
+    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, future.v7_partialHydration && initialHydration === true, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError);
 
     // Cancel pending deferreds for no-longer-matched routes or routes we're
     // about to reload.  Note that if this is an action reload we would have
@@ -2397,7 +2429,9 @@ function createRouter(init) {
         actionData: pendingActionData
       } : {}, updatedFetchers ? {
         fetchers: new Map(state.fetchers)
-      } : {}));
+      } : {}), {
+        flushSync
+      });
       return {
         shortCircuited: true
       };
@@ -2423,7 +2457,7 @@ function createRouter(init) {
       } : {}, revalidatingFetchers.length > 0 ? {
         fetchers: new Map(state.fetchers)
       } : {}), {
-        flushSync: pendingFlushSync
+        flushSync
       });
     }
     revalidatingFetchers.forEach(rf => {
@@ -2578,7 +2612,7 @@ function createRouter(init) {
 
     // Call the action for the fetcher
     let abortController = new AbortController();
-    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
+    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, false, submission);
     fetchControllers.set(key, abortController);
     let originatingLoadId = incrementingLoadId;
     let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, manifest, mapRouteProperties, basename);
@@ -2591,9 +2625,7 @@ function createRouter(init) {
       return;
     }
     if (deletedFetchers.has(key)) {
-      updateFetcherState(key, getDoneFetcher(undefined), {
-        flushSync
-      });
+      updateFetcherState(key, getDoneFetcher(undefined));
       return;
     }
     if (isRedirectResult(actionResult)) {
@@ -2603,15 +2635,11 @@ function createRouter(init) {
         // should take precedence over this redirect navigation.  We already
         // set isRevalidationRequired so all loaders for the new route should
         // fire unless opted out via shouldRevalidate
-        updateFetcherState(key, getDoneFetcher(undefined), {
-          flushSync
-        });
+        updateFetcherState(key, getDoneFetcher(undefined));
         return;
       } else {
         fetchRedirectIds.add(key);
-        updateFetcherState(key, getLoadingFetcher(submission), {
-          flushSync
-        });
+        updateFetcherState(key, getLoadingFetcher(submission));
         return startRedirectNavigation(state, actionResult, {
           fetcherSubmission: submission
         });
@@ -2620,9 +2648,7 @@ function createRouter(init) {
 
     // Process any non-redirect errors thrown
     if (isErrorResult(actionResult)) {
-      setFetcherError(key, routeId, actionResult.error, {
-        flushSync
-      });
+      setFetcherError(key, routeId, actionResult.error);
       return;
     }
     if (isDeferredResult(actionResult)) {
@@ -2634,7 +2660,7 @@ function createRouter(init) {
     // Start the data load for current matches, or the next location if we're
     // in the middle of a navigation
     let nextLocation = state.navigation.location || state.location;
-    let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal);
+    let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal, false);
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let matches = state.navigation.state !== "idle" ? matchRoutes(routesToUse, state.navigation.location, basename) : state.matches;
     invariant(matches, "Didn't find any matches after fetcher action");
@@ -2642,7 +2668,7 @@ function createRouter(init) {
     fetchReloadIds.set(key, loadId);
     let loadFetcher = getLoadingFetcher(submission, actionResult.data);
     state.fetchers.set(key, loadFetcher);
-    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, {
+    let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, false, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, {
       [match.route.id]: actionResult.data
     }, undefined // No need to send through errors since we short circuit above
     );
@@ -2664,8 +2690,6 @@ function createRouter(init) {
     });
     updateState({
       fetchers: new Map(state.fetchers)
-    }, {
-      flushSync
     });
     let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
     abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
@@ -2727,8 +2751,6 @@ function createRouter(init) {
         errors,
         loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
         fetchers: new Map(state.fetchers)
-      }, {
-        flushSync
       });
       isRevalidationRequired = false;
     }
@@ -2743,7 +2765,7 @@ function createRouter(init) {
 
     // Call the loader for this fetcher route match
     let abortController = new AbortController();
-    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
+    let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, false);
     fetchControllers.set(key, abortController);
     let originatingLoadId = incrementingLoadId;
     let result = await callLoaderOrAction("loader", fetchRequest, match, matches, manifest, mapRouteProperties, basename);
@@ -2765,9 +2787,7 @@ function createRouter(init) {
       return;
     }
     if (deletedFetchers.has(key)) {
-      updateFetcherState(key, getDoneFetcher(undefined), {
-        flushSync
-      });
+      updateFetcherState(key, getDoneFetcher(undefined));
       return;
     }
 
@@ -2776,9 +2796,7 @@ function createRouter(init) {
       if (pendingNavigationLoadId > originatingLoadId) {
         // A new navigation was kicked off after our loader started, so that
         // should take precedence over this redirect navigation
-        updateFetcherState(key, getDoneFetcher(undefined), {
-          flushSync
-        });
+        updateFetcherState(key, getDoneFetcher(undefined));
         return;
       } else {
         fetchRedirectIds.add(key);
@@ -2789,17 +2807,13 @@ function createRouter(init) {
 
     // Process any non-redirect errors thrown
     if (isErrorResult(result)) {
-      setFetcherError(key, routeId, result.error, {
-        flushSync
-      });
+      setFetcherError(key, routeId, result.error);
       return;
     }
     invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
 
     // Put the fetcher back into an idle state
-    updateFetcherState(key, getDoneFetcher(result.data), {
-      flushSync
-    });
+    updateFetcherState(key, getDoneFetcher(result.data));
   }
 
   /**
@@ -2821,12 +2835,12 @@ function createRouter(init) {
    * actually touch history until we've processed redirects, so we just use
    * the history action from the original navigation (PUSH or REPLACE).
    */
-  async function startRedirectNavigation(state, redirect, _temp) {
+  async function startRedirectNavigation(state, redirect, _temp2) {
     let {
       submission,
       fetcherSubmission,
       replace
-    } = _temp === void 0 ? {} : _temp;
+    } = _temp2 === void 0 ? {} : _temp2;
     if (redirect.revalidate) {
       isRevalidationRequired = true;
     }
@@ -2904,7 +2918,7 @@ function createRouter(init) {
     // accordingly
     let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename)), ...fetchersToLoad.map(f => {
       if (f.matches && f.match && f.controller) {
-        return callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, f.controller.signal), f.match, f.matches, manifest, mapRouteProperties, basename);
+        return callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, f.controller.signal, false), f.match, f.matches, manifest, mapRouteProperties, basename);
       } else {
         let error = {
           type: ResultType.error,
@@ -2941,14 +2955,20 @@ function createRouter(init) {
     });
   }
   function updateFetcherState(key, fetcher, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
     state.fetchers.set(key, fetcher);
     updateState({
       fetchers: new Map(state.fetchers)
     }, {
-      flushSync: opts.flushSync
+      flushSync: (opts && opts.flushSync) === true
     });
   }
   function setFetcherError(key, routeId, error, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
     let boundaryMatch = findNearestBoundary(state.matches, routeId);
     deleteFetcher(key);
     updateState({
@@ -2957,7 +2977,7 @@ function createRouter(init) {
       },
       fetchers: new Map(state.fetchers)
     }, {
-      flushSync: opts.flushSync
+      flushSync: (opts && opts.flushSync) === true
     });
   }
   function getFetcher(key) {
@@ -2999,8 +3019,6 @@ function createRouter(init) {
     }
     updateState({
       fetchers: new Map(state.fetchers)
-    }, {
-      flushSync: false
     });
   }
   function abortFetcher(key) {
@@ -3070,8 +3088,6 @@ function createRouter(init) {
     blockers.set(key, newBlocker);
     updateState({
       blockers
-    }, {
-      flushSync: false
     });
   }
   function shouldBlockNavigation(_ref2) {
@@ -3139,8 +3155,6 @@ function createRouter(init) {
       if (y != null) {
         updateState({
           restoreScrollPosition: y
-        }, {
-          flushSync: false
         });
       }
     }
@@ -3181,6 +3195,9 @@ function createRouter(init) {
     get basename() {
       return basename;
     },
+    get future() {
+      return future;
+    },
     get state() {
       return state;
     },
@@ -3257,10 +3274,10 @@ function createStaticHandler(routes, opts) {
    * propagate that out and return the raw Response so the HTTP server can
    * return it directly.
    */
-  async function query(request, _temp2) {
+  async function query(request, _temp3) {
     let {
       requestContext
-    } = _temp2 === void 0 ? {} : _temp2;
+    } = _temp3 === void 0 ? {} : _temp3;
     let url = new URL(request.url);
     let method = request.method;
     let location = createLocation("", createPath(url), null, "default");
@@ -3346,11 +3363,11 @@ function createStaticHandler(routes, opts) {
    * code.  Examples here are 404 and 405 errors that occur prior to reaching
    * any user-defined loaders.
    */
-  async function queryRoute(request, _temp3) {
+  async function queryRoute(request, _temp4) {
     let {
       routeId,
       requestContext
-    } = _temp3 === void 0 ? {} : _temp3;
+    } = _temp4 === void 0 ? {} : _temp4;
     let url = new URL(request.url);
     let method = request.method;
     let location = createLocation("", createPath(url), null, "default");
@@ -3628,11 +3645,9 @@ function isSubmissionNavigation(opts) {
 function normalizeTo(location, matches, basename, prependBasename, to, fromRouteId, relative) {
   let contextualMatches;
   let activeRouteMatch;
-  if (fromRouteId != null && relative !== "path") {
+  if (fromRouteId) {
     // Grab matches up to the calling route so our route-relative logic is
-    // relative to the correct source route.  When using relative:path,
-    // fromRouteId is ignored since that is always relative to the current
-    // location path
+    // relative to the correct source route
     contextualMatches = [];
     for (let match of matches) {
       contextualMatches.push(match);
@@ -3647,7 +3662,7 @@ function normalizeTo(location, matches, basename, prependBasename, to, fromRoute
   }
 
   // Resolve the relative path
-  let path = resolveTo(to ? to : ".", getPathContributingMatches(contextualMatches).map(m => m.pathnameBase), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
+  let path = resolveTo(to ? to : ".", getResolveToMatches(contextualMatches), stripBasename(location.pathname, basename) || location.pathname, relative === "path");
 
   // When `to` is not specified we inherit search/hash from the current
   // location, unlike when to="." and we just inherit the path.
@@ -3811,7 +3826,7 @@ function getLoaderMatchesUntilBoundary(matches, boundaryId) {
   }
   return boundaryMatches;
 }
-function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError) {
+function getMatchesToLoad(history, state, matches, submission, location, isInitialLoad, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError) {
   let actionResult = pendingError ? Object.values(pendingError)[0] : pendingActionData ? Object.values(pendingActionData)[0] : undefined;
   let currentUrl = history.createURL(state.location);
   let nextUrl = history.createURL(location);
@@ -3820,6 +3835,11 @@ function getMatchesToLoad(history, state, matches, submission, location, isReval
   let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
   let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
   let navigationMatches = boundaryMatches.filter((match, index) => {
+    if (isInitialLoad) {
+      // On initial hydration we don't do any shouldRevalidate stuff - we just
+      // call the loaders that don't have hydration data
+      return match.route.loader && state.loaderData[match.route.id] === undefined;
+    }
     if (match.route.lazy) {
       // We haven't loaded this route yet so we don't know if it's got a loader!
       return true;
@@ -3859,8 +3879,12 @@ function getMatchesToLoad(history, state, matches, submission, location, isReval
   // Pick fetcher.loads that need to be revalidated
   let revalidatingFetchers = [];
   fetchLoadMatches.forEach((f, key) => {
-    // Don't revalidate if fetcher won't be present in the subsequent render
-    if (!matches.some(m => m.route.id === f.routeId)) {
+    // Don't revalidate:
+    //  - on initial load (shouldn't be any fetchers then anyway)
+    //  - if fetcher won't be present in the subsequent render
+    //    - no longer matches the URL (v7_fetcherPersist=false)
+    //    - was unmounted but persisted due to v7_fetcherPersist=true
+    if (isInitialLoad || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
       return;
     }
     let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
@@ -4187,11 +4211,16 @@ async function callLoaderOrAction(type, request, match, matches, manifest, mapRo
 // Utility method for creating the Request instances for loaders/actions during
 // client-side navigations and fetches.  During SSR we will always have a
 // Request instance from the static handler (query/queryRoute)
-function createClientSideRequest(history, location, signal, submission) {
+function createClientSideRequest(history, location, signal, initial, submission) {
   let url = history.createURL(stripHashFromPath(location)).toString();
   let init = {
     signal
   };
+  if (initial) {
+    init.headers = {
+      "X-Remix-Initial-Load": "yes"
+    };
+  }
   if (submission && isMutationMethod(submission.formMethod)) {
     let {
       formMethod,
@@ -4399,13 +4428,13 @@ function getShortCircuitMatches(routes) {
     route
   };
 }
-function getInternalRouterError(status, _temp4) {
+function getInternalRouterError(status, _temp5) {
   let {
     pathname,
     routeId,
     method,
     type
-  } = _temp4 === void 0 ? {} : _temp4;
+  } = _temp5 === void 0 ? {} : _temp5;
   let statusText = "Unknown Server Error";
   let errorMessage = "Unknown @remix-run/router error";
   if (status === 400) {
@@ -4746,7 +4775,7 @@ exports.UNSAFE_DeferredData = DeferredData;
 exports.UNSAFE_ErrorResponseImpl = ErrorResponseImpl;
 exports.UNSAFE_convertRouteMatchToUiMatch = convertRouteMatchToUiMatch;
 exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
-exports.UNSAFE_getPathContributingMatches = getPathContributingMatches;
+exports.UNSAFE_getResolveToMatches = getResolveToMatches;
 exports.UNSAFE_invariant = invariant;
 exports.UNSAFE_warning = warning;
 exports.createBrowserHistory = createBrowserHistory;