react-router-dom 6.13.0 → 6.14.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # `react-router-dom`
 
+## 6.14.0-pre.0
+
+### Minor Changes
+
+- Add support for `application/json` and `text/plain` encodings for `useSubmit`/`fetcher.submit`. To reflect these additional types, `useNavigation`/`useFetcher` now also contain `navigation.json`/`navigation.text` and `fetcher.json`/`fetcher.text` which include the json/text submission if applicable. ([#10413](https://github.com/remix-run/react-router/pull/10413))
+
+  ```jsx
+  // The default behavior will still serialize as FormData
+  function Component() {
+    let navigation = useNavigation();
+    let submit = useSubmit();
+    submit({ key: "value" });
+    // navigation.formEncType => "application/x-www-form-urlencoded"
+    // navigation.formData    => FormData instance
+  }
+
+  async function action({ request }) {
+    // request.headers.get("Content-Type") => "application/x-www-form-urlencoded"
+    // await request.formData()            => FormData instance
+  }
+  ```
+
+  ```js
+  // Opt-into JSON encoding with `encType: "application/json"`
+  function Component() {
+    let submit = useSubmit();
+    submit({ key: "value" }, { encType: "application/json" });
+    // navigation.formEncType => "application/json"
+    // navigation.json        => { key: "value" }
+  }
+
+  async function action({ request }) {
+    // request.headers.get("Content-Type") => "application/json"
+    // await request.json                  => { key: "value" }
+  }
+  ```
+
+  ```js
+  // Opt-into JSON encoding with `encType: "application/json"`
+  function Component() {
+    let submit = useSubmit();
+    submit("Text submission", { encType: "text/plain" });
+    // navigation.formEncType => "text/plain"
+    // navigation.text        => "Text submission"
+  }
+
+  async function action({ request }) {
+    // request.headers.get("Content-Type") => "text/plain"
+    // await request.text()                => "Text submission"
+  }
+  ```
+
+### Patch Changes
+
+- When submitting a form from a `submitter` element, prefer the built-in `new FormData(form, submitter)` instead of the previous manual approach in modern browsers (those that support the new `submitter` parameter). For browsers that don't support it, we continue to just append the submit button's entry to the end, and we also add rudimentary support for `type="image"` buttons. If developers want full spec-compliant support for legacy browsers, they can use the `formdata-submitter-polyfill`. ([#9865](https://github.com/remix-run/react-router/pull/9865))
+- upgrade `typescript` to 5.1 ([#10581](https://github.com/remix-run/react-router/pull/10581))
+- Call `window.history.pushState/replaceState` before updating React Router state (instead of after) so that `window.location` matches `useLocation` during synchronous React 17 rendering. However, generally apps should not be relying on `window.location` and should always reference `useLocation` when possible, as `window.location` will not be in sync 100% of the time (due to `popstate` events, concurrent mode, etc.) ([#10211](https://github.com/remix-run/react-router/pull/10211))
+- Fix `tsc --skipLibCheck:false` issues on React 17 ([#10622](https://github.com/remix-run/react-router/pull/10622))
+- Updated dependencies:
+  - `react-router@6.14.0-pre.0`
+  - `@remix-run/router@1.7.0-pre.0`
+
 ## 6.13.0
 
 ### Minor Changes

package/dist/dom.d.ts

@@ -4,10 +4,10 @@ export declare function isHtmlElement(object: any): object is HTMLElement;
 export declare function isButtonElement(object: any): object is HTMLButtonElement;
 export declare function isFormElement(object: any): object is HTMLFormElement;
 export declare function isInputElement(object: any): object is HTMLInputElement;
-declare type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
+type LimitedMouseEvent = Pick<MouseEvent, "button" | "metaKey" | "altKey" | "ctrlKey" | "shiftKey">;
 export declare function shouldProcessLinkClick(event: LimitedMouseEvent, target?: string): boolean;
-export declare type ParamKeyValuePair = [string, string];
-export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
+export type ParamKeyValuePair = [string, string];
+export type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
 /**
  * Creates a URLSearchParams object using the given initializer.
  *
@@ -31,6 +31,15 @@ export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<
  */
 export declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
 export declare function getSearchParamsForLocation(locationSearch: string, defaultSearchParams: URLSearchParams | null): URLSearchParams;
+type JsonObject = {
+    [Key in string]: JsonValue;
+} & {
+    [Key in string]?: JsonValue | undefined;
+};
+type JsonArray = JsonValue[] | readonly JsonValue[];
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+export type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | JsonValue | null;
 export interface SubmitOptions {
     /**
      * The HTTP method used to submit the form. Overrides `<form method>`.
@@ -43,7 +52,7 @@ export interface SubmitOptions {
      */
     action?: string;
     /**
-     * The action URL used to submit the form. Overrides `<form encType>`.
+     * The encoding used to submit the form. Overrides `<form encType>`.
      * Defaults to "application/x-www-form-urlencoded".
      */
     encType?: FormEncType;
@@ -65,12 +74,11 @@ export interface SubmitOptions {
      */
     preventScrollReset?: boolean;
 }
-export declare function getFormSubmissionInfo(target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
-    [name: string]: string;
-} | null, options: SubmitOptions, basename: string): {
+export declare function getFormSubmissionInfo(target: SubmitTarget, basename: string): {
     action: string | null;
     method: string;
     encType: string;
-    formData: FormData;
+    formData: FormData | undefined;
+    body: any;
 };
 export {};

package/dist/index.d.ts

@@ -5,7 +5,7 @@
 import * as React from "react";
 import type { FutureConfig, NavigateOptions, RelativeRoutingType, RouteObject, 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 { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
+import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
 import { createSearchParams } from "./dom";
 export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
 export { createSearchParams };
@@ -100,6 +100,11 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
      * "put", "delete", "patch".
      */
     method?: HTMLFormMethod;
+    /**
+     * `<form encType>` - enhancing beyond the normal string type and limiting
+     * to the built-in browser supported values
+     */
+    encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
     /**
      * Normal `<form action>` but supports React Router's relative paths.
      */
@@ -167,10 +172,7 @@ export declare function useLinkClickHandler<E extends Element = HTMLAnchorElemen
  * URLSearchParams interface.
  */
 export declare function useSearchParams(defaultInit?: URLSearchParamsInit): [URLSearchParams, SetURLSearchParams];
-export declare type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
-declare type SubmitTarget = HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
-    [name: string]: string;
-} | null;
+export type SetURLSearchParams = (nextInit?: URLSearchParamsInit | ((prev: URLSearchParams) => URLSearchParamsInit), navigateOpts?: NavigateOptions) => void;
 /**
  * Submits a HTML `<form>` to the server without reloading the page.
  */
@@ -191,6 +193,12 @@ export interface SubmitFunction {
      */
     options?: SubmitOptions): void;
 }
+/**
+ * Submits a fetcher `<form>` to the server without reloading the page.
+ */
+export interface FetcherSubmitFunction {
+    (target: SubmitTarget, options?: Omit<SubmitOptions, "replace">): void;
+}
 /**
  * Returns a function that may be used to programmatically submit a form (or
  * some arbitrary data) to the server.
@@ -200,9 +208,9 @@ export declare function useFormAction(action?: string, { relative }?: {
     relative?: RelativeRoutingType;
 }): string;
 declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
-export declare type FetcherWithComponents<TData> = Fetcher<TData> & {
+export type FetcherWithComponents<TData> = Fetcher<TData> & {
     Form: ReturnType<typeof createFetcherForm>;
-    submit: (target: SubmitTarget, options?: Omit<SubmitOptions, "replace" | "preventScrollReset">) => void;
+    submit: FetcherSubmitFunction;
     load: (href: string) => void;
 };
 /**

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v6.13.0
+ * React Router DOM v6.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,9 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_mapRouteProperties, UNSAFE_startTransitionImpl, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
+import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext } from 'react-router';
 export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, 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, 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 { stripBasename, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
+import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, ErrorResponse, UNSAFE_invariant, joinPaths } from '@remix-run/router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -108,83 +108,95 @@ function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
   }
   return searchParams;
 }
-function getFormSubmissionInfo(target, options, basename) {
+// One-time check for submitter support
+let formDataSupportsSubmitter = false;
+try {
+  // @ts-expect-error if FormData supports the submitter parameter, this will throw
+  new FormData(undefined, 0);
+} catch (e) {
+  formDataSupportsSubmitter = true;
+}
+const supportedFormEncTypes = new Set(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
+function getFormEncType(encType) {
+  if (encType != null && !supportedFormEncTypes.has(encType)) {
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(false, "\"" + encType + "\" is not a valid `encType` for `<Form>`/`<fetcher.Form>` " + ("and will default to \"" + defaultEncType + "\"")) : void 0;
+    return null;
+  }
+  return encType;
+}
+function getFormSubmissionInfo(target, basename) {
   let method;
-  let action = null;
+  let action;
   let encType;
   let formData;
+  let body;
   if (isFormElement(target)) {
-    let submissionTrigger = options.submissionTrigger;
-    if (options.action) {
-      action = options.action;
-    } else {
-      // When grabbing the action from the element, it will have had the basename
-      // prefixed to ensure non-JS scenarios work, so strip it since we'll
-      // re-prefix in the router
-      let attr = target.getAttribute("action");
-      action = attr ? stripBasename(attr, basename) : null;
-    }
-    method = options.method || target.getAttribute("method") || defaultMethod;
-    encType = options.encType || target.getAttribute("enctype") || defaultEncType;
+    // When grabbing the action from the element, it will have had the basename
+    // prefixed to ensure non-JS scenarios work, so strip it since we'll
+    // re-prefix in the router
+    let attr = target.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
+    method = target.getAttribute("method") || defaultMethod;
+    encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
     formData = new FormData(target);
-    if (submissionTrigger && submissionTrigger.name) {
-      formData.append(submissionTrigger.name, submissionTrigger.value);
-    }
   } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
     let form = target.form;
     if (form == null) {
       throw new Error("Cannot submit a <button> or <input type=\"submit\"> without a <form>");
     }
     // <button>/<input type="submit"> may override attributes of <form>
-    if (options.action) {
-      action = options.action;
-    } else {
-      // When grabbing the action from the element, it will have had the basename
-      // prefixed to ensure non-JS scenarios work, so strip it since we'll
-      // re-prefix in the router
-      let attr = target.getAttribute("formaction") || form.getAttribute("action");
-      action = attr ? stripBasename(attr, basename) : null;
-    }
-    method = options.method || target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
-    encType = options.encType || target.getAttribute("formenctype") || form.getAttribute("enctype") || defaultEncType;
-    formData = new FormData(form);
-    // Include name + value from a <button>, appending in case the button name
-    // matches an existing input name
-    if (target.name) {
-      formData.append(target.name, target.value);
+    // When grabbing the action from the element, it will have had the basename
+    // prefixed to ensure non-JS scenarios work, so strip it since we'll
+    // re-prefix in the router
+    let attr = target.getAttribute("formaction") || form.getAttribute("action");
+    action = attr ? stripBasename(attr, basename) : null;
+    method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
+    encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
+    // Build a FormData object populated from a form and submitter
+    formData = new FormData(form, target);
+    // If this browser doesn't support the `FormData(el, submitter)` format,
+    // then tack on the submitter value at the end.  This is a lightweight
+    // solution that is not 100% spec compliant.  For complete support in older
+    // browsers, consider using the `formdata-submitter-polyfill` package
+    if (!formDataSupportsSubmitter) {
+      let {
+        name,
+        type,
+        value
+      } = target;
+      if (type === "image") {
+        let prefix = name ? name + "." : "";
+        formData.append(prefix + "x", "0");
+        formData.append(prefix + "y", "0");
+      } else if (name) {
+        formData.append(name, value);
+      }
     }
   } else if (isHtmlElement(target)) {
     throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
   } else {
-    method = options.method || defaultMethod;
-    action = options.action || null;
-    encType = options.encType || defaultEncType;
-    if (target instanceof FormData) {
-      formData = target;
-    } else {
-      formData = new FormData();
-      if (target instanceof URLSearchParams) {
-        for (let [name, value] of target) {
-          formData.append(name, value);
-        }
-      } else if (target != null) {
-        for (let name of Object.keys(target)) {
-          formData.append(name, target[name]);
-        }
-      }
-    }
+    method = defaultMethod;
+    action = null;
+    encType = defaultEncType;
+    body = target;
+  }
+  // Send body for <Form encType="text/plain" so we encode it into text
+  if (formData && encType === "text/plain") {
+    body = formData;
+    formData = undefined;
   }
   return {
     action,
     method: method.toLowerCase(),
     encType,
-    formData
+    formData,
+    body
   };
 }
 
 const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "preventScrollReset"],
   _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
-  _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId", "relative", "preventScrollReset"];
+  _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset"];
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
@@ -244,6 +256,33 @@ function deserializeErrors(errors) {
   }
   return serialized;
 }
+//#endregion
+////////////////////////////////////////////////////////////////////////////////
+//#region Components
+////////////////////////////////////////////////////////////////////////////////
+/**
+  Webpack + React 17 fails to compile on any of the following because webpack
+  complains that `startTransition` doesn't exist in `React`:
+  * import { startTransition } from "react"
+  * import * as React from from "react";
+    "startTransition" in React ? React.startTransition(() => setState()) : setState()
+  * import * as React from from "react";
+    "startTransition" in React ? React["startTransition"](() => setState()) : setState()
+
+  Moving it to a constant such as the following solves the Webpack/React 17 issue:
+  * import * as React from from "react";
+    const START_TRANSITION = "startTransition";
+    START_TRANSITION in React ? React[START_TRANSITION](() => setState()) : setState()
+
+  However, that introduces webpack/terser minification issues in production builds
+  in React 18 where minification/obfuscation ends up removing the call of
+  React.startTransition entirely from the first half of the ternary.  Grabbing
+  this exported reference once up front resolves that issue.
+
+  See https://github.com/remix-run/react-router/issues/10579
+*/
+const START_TRANSITION = "startTransition";
+const startTransitionImpl = React[START_TRANSITION];
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
@@ -270,7 +309,7 @@ function BrowserRouter(_ref) {
     v7_startTransition
   } = future || {};
   let setState = React.useCallback(newState => {
-    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+    v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
   }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
@@ -308,7 +347,7 @@ function HashRouter(_ref2) {
     v7_startTransition
   } = future || {};
   let setState = React.useCallback(newState => {
-    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+    v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
   }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
@@ -340,7 +379,7 @@ function HistoryRouter(_ref3) {
     v7_startTransition
   } = future || {};
   let setState = React.useCallback(newState => {
-    v7_startTransition && UNSAFE_startTransitionImpl ? UNSAFE_startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
+    v7_startTransition && startTransitionImpl ? startTransitionImpl(() => setStateImpl(newState)) : setStateImpl(newState);
   }, [setStateImpl, v7_startTransition]);
   React.useLayoutEffect(() => history.listen(setState), [history, setState]);
   return /*#__PURE__*/React.createElement(Router, {
@@ -501,7 +540,9 @@ if (process.env.NODE_ENV !== "production") {
  * submitted and returns with data.
  */
 const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
+  let submit = useSubmit();
   return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+    submit: submit,
     ref: ref
   }));
 });
@@ -515,13 +556,11 @@ const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
       method = defaultMethod,
       action,
       onSubmit,
-      fetcherKey,
-      routeId,
+      submit,
       relative,
       preventScrollReset
     } = _ref6,
     props = _objectWithoutPropertiesLoose(_ref6, _excluded3);
-  let submit = useSubmitImpl(fetcherKey, routeId);
   let formMethod = method.toLowerCase() === "get" ? "get" : "post";
   let formAction = useFormAction(action, {
     relative
@@ -574,7 +613,8 @@ if (process.env.NODE_ENV !== "production") {
 var DataRouterHook;
 (function (DataRouterHook) {
   DataRouterHook["UseScrollRestoration"] = "useScrollRestoration";
-  DataRouterHook["UseSubmitImpl"] = "useSubmitImpl";
+  DataRouterHook["UseSubmit"] = "useSubmit";
+  DataRouterHook["UseSubmitFetcher"] = "useSubmitFetcher";
   DataRouterHook["UseFetcher"] = "useFetcher";
 })(DataRouterHook || (DataRouterHook = {}));
 var DataRouterStateHook;
@@ -650,17 +690,19 @@ function useSearchParams(defaultInit) {
   }, [navigate, searchParams]);
   return [searchParams, setSearchParams];
 }
+function validateClientSideSubmission() {
+  if (typeof document === "undefined") {
+    throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
+  }
+}
 /**
  * Returns a function that may be used to programmatically submit a form (or
  * some arbitrary data) to the server.
  */
 function useSubmit() {
-  return useSubmitImpl();
-}
-function useSubmitImpl(fetcherKey, fetcherRouteId) {
   let {
     router
-  } = useDataRouterContext(DataRouterHook.UseSubmitImpl);
+  } = useDataRouterContext(DataRouterHook.UseSubmit);
   let {
     basename
   } = React.useContext(UNSAFE_NavigationContext);
@@ -669,32 +711,56 @@ function useSubmitImpl(fetcherKey, fetcherRouteId) {
     if (options === void 0) {
       options = {};
     }
-    if (typeof document === "undefined") {
-      throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
-    }
+    validateClientSideSubmission();
     let {
       action,
       method,
       encType,
-      formData
-    } = getFormSubmissionInfo(target, options, basename);
-    // Base options shared between fetch() and navigate()
-    let opts = {
+      formData,
+      body
+    } = getFormSubmissionInfo(target, basename);
+    router.navigate(options.action || action, {
       preventScrollReset: options.preventScrollReset,
       formData,
-      formMethod: method,
-      formEncType: encType
-    };
-    if (fetcherKey) {
-      !(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
-      router.fetch(fetcherKey, fetcherRouteId, action, opts);
-    } else {
-      router.navigate(action, _extends({}, opts, {
-        replace: options.replace,
-        fromRouteId: currentRouteId
-      }));
+      body,
+      formMethod: options.method || method,
+      formEncType: options.encType || encType,
+      replace: options.replace,
+      fromRouteId: currentRouteId
+    });
+  }, [router, basename, currentRouteId]);
+}
+/**
+ * Returns the implementation for fetcher.submit
+ */
+function useSubmitFetcher(fetcherKey, fetcherRouteId) {
+  let {
+    router
+  } = useDataRouterContext(DataRouterHook.UseSubmitFetcher);
+  let {
+    basename
+  } = React.useContext(UNSAFE_NavigationContext);
+  return React.useCallback(function (target, options) {
+    if (options === void 0) {
+      options = {};
     }
-  }, [router, basename, fetcherKey, fetcherRouteId, currentRouteId]);
+    validateClientSideSubmission();
+    let {
+      action,
+      method,
+      encType,
+      formData,
+      body
+    } = getFormSubmissionInfo(target, basename);
+    !(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
+    router.fetch(fetcherKey, fetcherRouteId, options.action || action, {
+      preventScrollReset: options.preventScrollReset,
+      formData,
+      body,
+      formMethod: options.method || method,
+      formEncType: options.encType || encType
+    });
+  }, [router, basename, fetcherKey, fetcherRouteId]);
 }
 // v7: Eventually we should deprecate this entirely in favor of using the
 // router method directly?
@@ -748,10 +814,10 @@ function useFormAction(action, _temp2) {
 }
 function createFetcherForm(fetcherKey, routeId) {
   let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+    let submit = useSubmitFetcher(fetcherKey, routeId);
     return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
       ref: ref,
-      fetcherKey: fetcherKey,
-      routeId: routeId
+      submit: submit
     }));
   });
   if (process.env.NODE_ENV !== "production") {
@@ -783,7 +849,7 @@ function useFetcher() {
     !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);
   });
-  let submit = useSubmitImpl(fetcherKey, routeId);
+  let submit = useSubmitFetcher(fetcherKey, routeId);
   let fetcher = router.getFetcher(fetcherKey);
   let fetcherWithComponents = React.useMemo(() => _extends({
     Form,
@@ -829,6 +895,9 @@ function useScrollRestoration(_temp3) {
     restoreScrollPosition,
     preventScrollReset
   } = useDataRouterState(DataRouterStateHook.UseScrollRestoration);
+  let {
+    basename
+  } = React.useContext(UNSAFE_NavigationContext);
   let location = useLocation();
   let matches = useMatches();
   let navigation = useNavigation();
@@ -864,9 +933,13 @@ function useScrollRestoration(_temp3) {
     // Enable scroll restoration in the router
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useLayoutEffect(() => {
-      let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKey);
+      let getKeyWithoutBasename = getKey && basename !== "/" ? (location, matches) => getKey( // Strip the basename to match useLocation()
+      _extends({}, location, {
+        pathname: stripBasename(location.pathname, basename) || location.pathname
+      }), matches) : getKey;
+      let disableScrollRestoration = router == null ? void 0 : router.enableScrollRestoration(savedScrollPositions, () => window.scrollY, getKeyWithoutBasename);
       return () => disableScrollRestoration && disableScrollRestoration();
-    }, [router, getKey]);
+    }, [router, basename, getKey]);
     // Restore scrolling when state.restoreScrollPosition changes
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useLayoutEffect(() => {