react-router-dom 0.0.0-experimental-a077dc2d → 0.0.0-experimental-e192105b

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # `react-router-dom`
 
+## 6.18.0
+
+### Minor Changes
+
+- Add support for manual fetcher key specification via `useFetcher({ key: string })` so you can access the same fetcher instance from different components in your application without prop-drilling ([RFC](https://github.com/remix-run/remix/discussions/7698)) ([#10960](https://github.com/remix-run/react-router/pull/10960))
+
+  - Fetcher keys are now also exposed on the fetchers returned from `useFetchers` so that they can be looked up by `key`
+
+- Add `navigate`/`fetcherKey` params/props to `useSumbit`/`Form` to support kicking off a fetcher submission under the hood with an optionally user-specified `key` ([#10960](https://github.com/remix-run/react-router/pull/10960))
+
+  - Invoking a fetcher in this way is ephemeral and stateless
+  - If you need to access the state of one of these fetchers, you will need to leverage `useFetcher({ key })` to look it up elsewhere
+
+### Patch Changes
+
+- Adds a fetcher context to `RouterProvider` that holds completed fetcher data, in preparation for the upcoming future flag that will change the fetcher persistence/cleanup behavior ([#10961](https://github.com/remix-run/react-router/pull/10961))
+- Fix the `future` prop on `BrowserRouter`, `HashRouter` and `MemoryRouter` so that it accepts a `Partial<FutureConfig>` instead of requiring all flags to be included. ([#10962](https://github.com/remix-run/react-router/pull/10962))
+- Updated dependencies:
+  - `@remix-run/router@1.11.0`
+  - `react-router@6.18.0`
+
 ## 6.17.0
 
 ### Minor Changes

package/dist/dom.d.ts

@@ -85,6 +85,10 @@ export interface SubmitOptions {
      * navigation when using the <ScrollRestoration> component
      */
     preventScrollReset?: boolean;
+    /**
+     * Enable flushSync for this navigation's state updates
+     */
+    unstable_flushSync?: boolean;
     /**
      * Enable view transitions on this submission navigation
      */

package/dist/index.d.ts

@@ -4,13 +4,13 @@
  */
 import * as React from "react";
 import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
+import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod, BlockerFunction } from "@remix-run/router";
 import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
 export { createSearchParams };
 export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, } from "react-router";
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
 export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router";
 declare global {
@@ -31,17 +31,14 @@ type ViewTransitionContextObject = {
     isTransitioning: false;
 } | {
     isTransitioning: true;
+    flushSync: boolean;
     currentLocation: Location;
     nextLocation: Location;
 };
 declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
 export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
-type FetchersContextObject = {
-    fetcherData: Map<string, any>;
-    register: (key: string) => void;
-    unregister: (key: string) => void;
-};
-declare const FetchersContext: React.Context<FetchersContextObject | null>;
+type FetchersContextObject = Map<string, any>;
+declare const FetchersContext: React.Context<FetchersContextObject>;
 export { FetchersContext as UNSAFE_FetchersContext };
 interface ViewTransition {
     finished: Promise<void>;
@@ -98,6 +95,7 @@ export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEle
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
     to: To;
+    unstable_flushSync?: boolean;
     unstable_viewTransition?: boolean;
 }
 /**
@@ -115,7 +113,6 @@ export interface NavLinkProps extends Omit<LinkProps, "className" | "style" | "c
     className?: string | ((props: NavLinkRenderProps) => string | undefined);
     end?: boolean;
     style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
-    unstable_viewTransition?: boolean;
 }
 /**
  * A `<Link>` wrapper that knows if it's "active" or not.
@@ -176,6 +173,10 @@ export interface FormProps extends FetcherFormProps {
      * State object to add to the history stack entry for this navigation
      */
     state?: any;
+    /**
+     * Enable flushSync navigation's staten updates
+     */
+    unstable_flushSync?: boolean;
     /**
      * Enable view transitions on this Form navigation
      */
@@ -205,12 +206,13 @@ export declare namespace ScrollRestoration {
  * you need to create custom `<Link>` components with the same click behavior we
  * use in our exported `<Link>`.
  */
-export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, unstable_viewTransition, }?: {
+export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, preventScrollReset, relative, unstable_flushSync, unstable_viewTransition, }?: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
     preventScrollReset?: boolean;
     relative?: RelativeRoutingType;
+    unstable_flushSync?: boolean;
     unstable_viewTransition?: boolean;
 }): (event: React.MouseEvent<E, MouseEvent>) => void;
 /**
@@ -299,8 +301,8 @@ export declare function useBeforeUnload(callback: (event: BeforeUnloadEvent) =>
  * very incorrectly in some cases) across browsers if user click addition
  * back/forward navigations while the confirm is open.  Use at your own risk.
  */
-declare function usePrompt({ when, message }: {
-    when: boolean;
+declare function usePrompt({ when, message, }: {
+    when: boolean | BlockerFunction;
     message: string;
 }): void;
 export { usePrompt as unstable_usePrompt };

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v0.0.0-experimental-a077dc2d
+ * React Router DOM v0.0.0-experimental-e192105b
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,8 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker } from 'react-router';
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
+import * as ReactDOM from 'react-dom';
+import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, useBlocker } from 'react-router';
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
 import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, IDLE_FETCHER, matchPath } from '@remix-run/router';
 
 function _extends() {
@@ -206,9 +207,9 @@ function getFormSubmissionInfo(target, basename) {
   };
 }
 
-const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_viewTransition"],
+const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset", "unstable_flushSync", "unstable_viewTransition"],
   _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
-  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_viewTransition"];
+  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_flushSync", "unstable_viewTransition"];
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
@@ -294,7 +295,7 @@ const ViewTransitionContext = /*#__PURE__*/React.createContext({
 if (process.env.NODE_ENV !== "production") {
   ViewTransitionContext.displayName = "ViewTransition";
 }
-const FetchersContext = /*#__PURE__*/React.createContext(null);
+const FetchersContext = /*#__PURE__*/React.createContext(new Map());
 if (process.env.NODE_ENV !== "production") {
   FetchersContext.displayName = "Fetchers";
 }
@@ -325,6 +326,8 @@ if (process.env.NODE_ENV !== "production") {
 */
 const START_TRANSITION = "startTransition";
 const startTransitionImpl = React[START_TRANSITION];
+const FLUSH_SYNC = "flushSync";
+const flushSyncImpl = ReactDOM[FLUSH_SYNC];
 function startTransitionSafe(cb) {
   if (startTransitionImpl) {
     startTransitionImpl(cb);
@@ -332,6 +335,13 @@ function startTransitionSafe(cb) {
     cb();
   }
 }
+function flushSyncSafe(cb) {
+  if (flushSyncImpl) {
+    flushSyncImpl(cb);
+  } else {
+    cb();
+  }
+}
 class Deferred {
   constructor() {
     this.status = "pending";
@@ -360,10 +370,6 @@ function RouterProvider(_ref) {
     router,
     future
   } = _ref;
-  let {
-    fetcherContext,
-    fetcherData
-  } = useFetcherDataLayer();
   let [state, setStateImpl] = React.useState(router.state);
   let [pendingState, setPendingState] = React.useState();
   let [vtContext, setVtContext] = React.useState({
@@ -372,6 +378,7 @@ function RouterProvider(_ref) {
   let [renderDfd, setRenderDfd] = React.useState();
   let [transition, setTransition] = React.useState();
   let [interruption, setInterruption] = React.useState();
+  let fetcherData = React.useRef(new Map());
   let {
     v7_startTransition
   } = future || {};
@@ -384,20 +391,66 @@ function RouterProvider(_ref) {
   }, [v7_startTransition]);
   let setState = React.useCallback((newState, _ref2) => {
     let {
+      deletedFetchers,
+      unstable_flushSync: flushSync,
       unstable_viewTransitionOpts: viewTransitionOpts
     } = _ref2;
+    deletedFetchers.forEach(key => fetcherData.current.delete(key));
     newState.fetchers.forEach((fetcher, key) => {
       if (fetcher.data !== undefined) {
         fetcherData.current.set(key, fetcher.data);
       }
     });
-    if (!viewTransitionOpts || router.window == null || typeof router.window.document.startViewTransition !== "function") {
-      // Mid-navigation state update, or startViewTransition isn't available
-      optInStartTransition(() => setStateImpl(newState));
-    } else if (transition && renderDfd) {
+    let isViewTransitionUnavailable = router.window == null || typeof router.window.document.startViewTransition !== "function";
+    // If this isn't a view transition or it's not available in this browser,
+    // just update and be done with it
+    if (!viewTransitionOpts || isViewTransitionUnavailable) {
+      if (flushSync) {
+        flushSyncSafe(() => setStateImpl(newState));
+      } else {
+        optInStartTransition(() => setStateImpl(newState));
+      }
+      return;
+    }
+    // flushSync + startViewTransition
+    if (flushSync) {
+      // Flush through the context to mark DOM elements as transition=ing
+      flushSyncSafe(() => {
+        // Cancel any pending transitions
+        if (transition) {
+          renderDfd && renderDfd.resolve();
+          transition.skipTransition();
+        }
+        setVtContext({
+          isTransitioning: true,
+          flushSync: true,
+          currentLocation: viewTransitionOpts.currentLocation,
+          nextLocation: viewTransitionOpts.nextLocation
+        });
+      });
+      // Update the DOM
+      let t = router.window.document.startViewTransition(() => {
+        flushSyncSafe(() => setStateImpl(newState));
+      });
+      // Clean up after the animation completes
+      t.finished.finally(() => {
+        flushSyncSafe(() => {
+          setRenderDfd(undefined);
+          setTransition(undefined);
+          setPendingState(undefined);
+          setVtContext({
+            isTransitioning: false
+          });
+        });
+      });
+      flushSyncSafe(() => setTransition(t));
+      return;
+    }
+    // startTransition + startViewTransition
+    if (transition) {
       // Interrupting an in-progress transition, cancel and let everything flush
       // out, and then kick off a new transition from the interruption state
-      renderDfd.resolve();
+      renderDfd && renderDfd.resolve();
       transition.skipTransition();
       setInterruption({
         state: newState,
@@ -409,6 +462,7 @@ function RouterProvider(_ref) {
       setPendingState(newState);
       setVtContext({
         isTransitioning: true,
+        flushSync: false,
         currentLocation: viewTransitionOpts.currentLocation,
         nextLocation: viewTransitionOpts.nextLocation
       });
@@ -420,10 +474,10 @@ function RouterProvider(_ref) {
   // When we start a view transition, create a Deferred we can use for the
   // eventual "completed" render
   React.useEffect(() => {
-    if (vtContext.isTransitioning) {
+    if (vtContext.isTransitioning && !vtContext.flushSync) {
       setRenderDfd(new Deferred());
     }
-  }, [vtContext.isTransitioning]);
+  }, [vtContext]);
   // Once the deferred is created, kick off startViewTransition() to update the
   // DOM and then wait on the Deferred to resolve (indicating the DOM update has
   // happened)
@@ -460,6 +514,7 @@ function RouterProvider(_ref) {
       setPendingState(interruption.state);
       setVtContext({
         isTransitioning: true,
+        flushSync: false,
         currentLocation: interruption.currentLocation,
         nextLocation: interruption.nextLocation
       });
@@ -500,7 +555,7 @@ function RouterProvider(_ref) {
   }, /*#__PURE__*/React.createElement(UNSAFE_DataRouterStateContext.Provider, {
     value: state
   }, /*#__PURE__*/React.createElement(FetchersContext.Provider, {
-    value: fetcherContext
+    value: fetcherData.current
   }, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
     value: vtContext
   }, /*#__PURE__*/React.createElement(Router, {
@@ -645,6 +700,7 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
       target,
       to,
       preventScrollReset,
+      unstable_flushSync,
       unstable_viewTransition
     } = _ref7,
     rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
@@ -685,6 +741,7 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
     target,
     preventScrollReset,
     relative,
+    unstable_flushSync,
     unstable_viewTransition
   });
   function handleClick(event) {
@@ -742,7 +799,13 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref
     nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
     toPathname = toPathname.toLowerCase();
   }
-  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+  // If the `to` has a trailing slash, look at that exact spot.  Otherwise,
+  // we're looking for a slash _after_ what's in `to`.  For example:
+  //
+  // <NavLink to="/users"> and <NavLink to="/users/">
+  // both want to look for a / at index 6 to match URL `/users/matt`
+  const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
   let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
   let renderProps = {
     isActive,
@@ -792,6 +855,7 @@ const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
       onSubmit,
       relative,
       preventScrollReset,
+      unstable_flushSync,
       unstable_viewTransition
     } = _ref9,
     props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
@@ -814,6 +878,7 @@ const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
       state,
       relative,
       preventScrollReset,
+      unstable_flushSync,
       unstable_viewTransition
     });
   };
@@ -877,36 +942,6 @@ function useDataRouterState(hookName) {
   !state ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, getDataRouterConsoleError(hookName)) : UNSAFE_invariant(false) : void 0;
   return state;
 }
-function useFetcherDataLayer() {
-  let fetcherRefs = React.useRef(new Map());
-  let fetcherData = React.useRef(new Map());
-  let registerFetcher = React.useCallback(key => {
-    let count = fetcherRefs.current.get(key);
-    if (count == null) {
-      fetcherRefs.current.set(key, 1);
-    } else {
-      fetcherRefs.current.set(key, count + 1);
-    }
-  }, [fetcherRefs]);
-  let unregisterFetcher = React.useCallback(key => {
-    let count = fetcherRefs.current.get(key);
-    if (count == null || count <= 1) {
-      fetcherRefs.current.delete(key);
-      fetcherData.current.delete(key);
-    } else {
-      fetcherRefs.current.set(key, count - 1);
-    }
-  }, [fetcherData, fetcherRefs]);
-  let fetcherContext = React.useMemo(() => ({
-    fetcherData: fetcherData.current,
-    register: registerFetcher,
-    unregister: unregisterFetcher
-  }), [fetcherData, registerFetcher, unregisterFetcher]);
-  return {
-    fetcherContext,
-    fetcherData
-  };
-}
 // External hooks
 /**
  * Handles the click behavior for router `<Link>` components. This is useful if
@@ -920,6 +955,7 @@ function useLinkClickHandler(to, _temp) {
     state,
     preventScrollReset,
     relative,
+    unstable_flushSync,
     unstable_viewTransition
   } = _temp === void 0 ? {} : _temp;
   let navigate = useNavigate();
@@ -938,10 +974,11 @@ function useLinkClickHandler(to, _temp) {
         state,
         preventScrollReset,
         relative,
+        unstable_flushSync,
         unstable_viewTransition
       });
     }
-  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_viewTransition]);
+  }, [location, navigate, path, replaceProp, state, target, to, preventScrollReset, relative, unstable_flushSync, unstable_viewTransition]);
 }
 /**
  * A convenient wrapper for reading and writing search parameters via the
@@ -1003,7 +1040,8 @@ function useSubmit() {
         formData,
         body,
         formMethod: options.method || method,
-        formEncType: options.encType || encType
+        formEncType: options.encType || encType,
+        unstable_flushSync: options.unstable_flushSync
       });
     } else {
       router.navigate(options.action || action, {
@@ -1015,6 +1053,7 @@ function useSubmit() {
         replace: options.replace,
         state: options.state,
         fromRouteId: currentRouteId,
+        unstable_flushSync: options.unstable_flushSync,
         unstable_viewTransition: options.unstable_viewTransition
       });
     }
@@ -1037,10 +1076,8 @@ function useFormAction(action, _temp2) {
   let path = _extends({}, useResolvedPath(action ? action : ".", {
     relative
   }));
-  // Previously we set the default action to ".". The problem with this is that
-  // `useResolvedPath(".")` excludes search params of the resolved URL. This is
-  // the intended behavior of when "." is specifically provided as
-  // the form action, but inconsistent w/ browsers when the action is omitted.
+  // If no action was specified, browsers will persist current search params
+  // when determining the path, so match that behavior
   // https://github.com/remix-run/remix/issues/927
   let location = useLocation();
   if (action == null) {
@@ -1082,10 +1119,10 @@ function useFetcher(_temp3) {
     router
   } = useDataRouterContext(DataRouterHook.UseFetcher);
   let state = useDataRouterState(DataRouterStateHook.UseFetcher);
-  let fetchersContext = React.useContext(FetchersContext);
+  let fetcherData = React.useContext(FetchersContext);
   let route = React.useContext(UNSAFE_RouteContext);
   let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
-  !fetchersContext ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : UNSAFE_invariant(false) : void 0;
+  !fetcherData ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : UNSAFE_invariant(false) : void 0;
   !route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
   !(routeId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher can only be used on routes that contain a unique \"id\"") : UNSAFE_invariant(false) : void 0;
   // Fetcher key handling
@@ -1094,26 +1131,19 @@ function useFetcher(_temp3) {
     setFetcherKey(getUniqueFetcherId());
   }
   // Registration/cleanup
-  let {
-    fetcherData,
-    register,
-    unregister
-  } = fetchersContext;
   React.useEffect(() => {
-    register(fetcherKey);
+    router.getFetcher(fetcherKey);
     return () => {
-      // Unregister from ref counting for the data layer
-      unregister(fetcherKey);
       // Tell the router we've unmounted - if v7_fetcherPersist is enabled this
       // will not delete immediately but instead queue up a delete after the
       // fetcher returns to an `idle` state
       router.deleteFetcher(fetcherKey);
     };
-  }, [router, fetcherKey, register, unregister]);
+  }, [router, fetcherKey]);
   // Fetcher additions
-  let load = React.useCallback(href => {
+  let load = React.useCallback((href, opts) => {
     !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-    router.fetch(fetcherKey, routeId, href);
+    router.fetch(fetcherKey, routeId, href, opts);
   }, [fetcherKey, routeId, router]);
   let submitImpl = useSubmit();
   let submit = React.useCallback((target, opts) => {
@@ -1312,7 +1342,7 @@ function usePrompt(_ref12) {
     when,
     message
   } = _ref12;
-  let blocker = unstable_useBlocker(when);
+  let blocker = useBlocker(when);
   React.useEffect(() => {
     if (blocker.state === "blocked") {
       let proceed = window.confirm(message);