Stabilize useNavigate/useSubmit/fetcher.submit for data routers

packages/react-router-dom-v5-compat/index.ts

@@ -172,6 +172,7 @@ export {
   unstable_usePrompt,
   useRevalidator,
   useRouteError,
+  useRouteId,
   useRouteLoaderData,
   useSubmit,
   UNSAFE_DataRouterContext,

packages/react-router-dom/__tests__/data-browser-router-test.tsx

@@ -33,6 +33,7 @@
   defer,
   useLocation,
   useMatches,
+  useSearchParams,
   createRoutesFromElements,
 } from "react-router-dom";
 
@@ -4411,6 +4412,80 @@
           </div>"
         `);
       });
+
+      it("useFetcher is stable across across location changes", async () => {
+        let router = createBrowserRouter(
+          [
+            {
+              path: "/",
+              Component() {
+                const [, setSearchParams] = useSearchParams();
+                let [count, setCount] = React.useState(0);
+                let fetcherCount = React.useRef(0);
+                let fetcher = useFetcher();
+                React.useEffect(() => {
+                  fetcherCount.current++;
+                }, [fetcher.submit]);
+                return (
+                  <>
+                    <button
+                      onClick={() => {
+                        setCount(count + 1);
+                        setSearchParams({
+                          random: Math.random().toString(),
+                        });
+                      }}
+                    >
+                      Click
+                    </button>
+                    <p>
+                      {count}-{fetcherCount.current}
+                    </p>
+                  </>
+                );
+              },
+            },
+          ],
+          {
+            window: getWindow("/"),
+          }
+        );
+
+        let { container } = render(<RouterProvider router={router} />);
+
+        expect(getHtml(container)).toMatchInlineSnapshot(`
+          "<div>
+            <button>
+              Click
+            </button>
+            <p>
+              0
+              -
+              0
+            </p>
+          </div>"
+        `);
+
+        fireEvent.click(screen.getByText("Click"));
+        fireEvent.click(screen.getByText("Click"));
+        fireEvent.click(screen.getByText("Click"));
+        fireEvent.click(screen.getByText("Click"));
+        fireEvent.click(screen.getByText("Click"));
+        await waitFor(() => screen.getByText(/5-1/));
+
+        expect(getHtml(container)).toMatchInlineSnapshot(`
+          "<div>
+            <button>
+              Click
+            </button>
+            <p>
+              5
+              -
+              1
+            </p>
+          </div>"
+        `);
+      });
     });
 
     describe("errors", () => {
@@ -5089,7 +5164,7 @@
   });
 }
 
 async function waitForRouterInitialize(router) {
   return await new Promise((resolve) => {
     let unsubscribe = router.subscribe((updatedState) => {
       if (updatedState.initialized) {

packages/react-router-dom/dom.ts

@@ -1,5 +1,9 @@
-import type { FormEncType, HTMLFormMethod } from "@remix-run/router";
-import type { RelativeRoutingType } from "react-router";
+import type {
+  FormEncType,
+  HTMLFormMethod,
+  RelativeRoutingType,
+} from "@remix-run/router";
+import { stripBasename } from "@remix-run/router";
 
 export const defaultMethod: HTMLFormMethod = "get";
 const defaultEncType: FormEncType = "application/x-www-form-urlencoded";
@@ -157,16 +161,16 @@ export function getFormSubmissionInfo(
     | URLSearchParams
     | { [name: string]: string }
     | null,
-  defaultAction: string,
-  options: SubmitOptions
+  options: SubmitOptions,
+  basename: string
 ): {
-  url: URL;
+  action: string | null;
   method: string;
   encType: string;
   formData: FormData;
 } {
   let method: string;
-  let action: string;
+  let action: string | null = null;
   let encType: string;
   let formData: FormData;
 
@@ -175,8 +179,16 @@ export function getFormSubmissionInfo(
       options as any
     ).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;
-    action = options.action || target.getAttribute("action") || defaultAction;
     encType =
       options.encType || target.getAttribute("enctype") || defaultEncType;
 
@@ -200,16 +212,21 @@ export function getFormSubmissionInfo(
 
     // <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("action") || form.getAttribute("action");
+      action = attr ? stripBasename(attr, basename) : null;
+    }
+
     method =
       options.method ||
       target.getAttribute("formmethod") ||
       form.getAttribute("method") ||
       defaultMethod;
-    action =
-      options.action ||
-      target.getAttribute("formaction") ||
-      form.getAttribute("action") ||
-      defaultAction;
     encType =
       options.encType ||
       target.getAttribute("formenctype") ||
@@ -230,7 +247,7 @@ export function getFormSubmissionInfo(
     );
   } else {
     method = options.method || defaultMethod;
-    action = options.action || defaultAction;
+    action = options.action || null;
     encType = options.encType || defaultEncType;
 
     if (target instanceof FormData) {
@@ -250,8 +267,5 @@ export function getFormSubmissionInfo(
     }
   }
 
-  let { protocol, host } = window.location;
-  let url = new URL(action, `${protocol}//${host}`);
-
-  return { url, method: method.toLowerCase(), encType, formData };
+  return { action, method: method.toLowerCase(), encType, formData };
 }

packages/react-router-dom/index.tsx

@@ -18,6 +18,7 @@ import {
   useNavigate,
   useNavigation,
   useResolvedPath,
+  useRouteId,
   unstable_useBlocker as useBlocker,
   UNSAFE_DataRouterContext as DataRouterContext,
   UNSAFE_DataRouterStateContext as DataRouterStateContext,
@@ -168,6 +169,7 @@ export {
   useResolvedPath,
   useRevalidator,
   useRouteError,
+  useRouteId,
   useRouteLoaderData,
   useRoutes,
 } from "react-router";
@@ -205,7 +207,7 @@ declare global {
 
 interface DOMRouterOpts {
   basename?: string;
-  future?: FutureConfig;
+  future?: Partial<Omit<FutureConfig, "v7_prependBasename">>;
   hydrationData?: HydrationState;
   window?: Window;
 }
@@ -216,7 +218,10 @@ export function createBrowserRouter(
 ): RemixRouter {
   return createRouter({
     basename: opts?.basename,
-    future: opts?.future,
+    future: {
+      ...opts?.future,
+      v7_prependBasename: true,
+    },
     history: createBrowserHistory({ window: opts?.window }),
     hydrationData: opts?.hydrationData || parseHydrationData(),
     routes,
@@ -230,7 +235,10 @@ export function createHashRouter(
 ): RemixRouter {
   return createRouter({
     basename: opts?.basename,
-    future: opts?.future,
+    future: {
+      ...opts?.future,
+      v7_prependBasename: true,
+    },
     history: createHashHistory({ window: opts?.window }),
     hydrationData: opts?.hydrationData || parseHydrationData(),
     routes,
@@ -946,9 +954,13 @@ export function useSubmit(): SubmitFunction {
   return useSubmitImpl();
 }
 
-function useSubmitImpl(fetcherKey?: string, routeId?: string): SubmitFunction {
+function useSubmitImpl(
+  fetcherKey?: string,
+  fetcherRouteId?: string
+): SubmitFunction {
   let { router } = useDataRouterContext(DataRouterHook.UseSubmitImpl);
-  let defaultAction = useFormAction();
+  let { basename } = React.useContext(NavigationContext);
+  let currentRouteId = useRouteId();
 
   return React.useCallback(
     (target, options = {}) => {
@@ -959,31 +971,39 @@ function useSubmitImpl(fetcherKey?: string, routeId?: string): SubmitFunction {
         );
       }
 
-      let { method, encType, formData, url } = getFormSubmissionInfo(
+      let { action, method, encType, formData } = getFormSubmissionInfo(
         target,
-        defaultAction,
-        options
+        options,
+        basename
       );
 
-      let href = url.pathname + url.search;
+      // Base options shared between fetch() and navigate()
       let opts = {
-        replace: options.replace,
         preventScrollReset: options.preventScrollReset,
         formData,
         formMethod: method as HTMLFormMethod,
         formEncType: encType as FormEncType,
       };
+
       if (fetcherKey) {
-        invariant(routeId != null, "No routeId available for useFetcher()");
-        router.fetch(fetcherKey, routeId, href, opts);
+        invariant(
+          fetcherRouteId != null,
+          "No routeId available for useFetcher()"
+        );
+        router.fetch(fetcherKey, fetcherRouteId, action, opts);
       } else {
-        router.navigate(href, opts);
+        router.navigate(action, {
+          ...opts,
+          replace: options.replace,
+          fromRouteId: currentRouteId,
+        });
       }
     },
-    [defaultAction, router, fetcherKey, routeId]
+    [router, basename, fetcherKey, fetcherRouteId, currentRouteId]
   );
 }
 
+// TODO: Deprecate entirely in favor of router.resolvePath()?
 export function useFormAction(
   action?: string,
   { relative }: { relative?: RelativeRoutingType } = {}
@@ -1116,7 +1136,7 @@ export function useFetcher<TData = any>(): FetcherWithComponents<TData> {
     // fetcher is no longer around.
     return () => {
       if (!router) {
-        console.warn(`No fetcher available to clean up from useFetcher()`);
+        console.warn(`No router available to clean up from useFetcher()`);
         return;
       }
       router.deleteFetcher(fetcherKey);

packages/react-router-dom/server.tsx

@@ -6,6 +6,7 @@ import type {
   StaticHandlerContext,
   CreateStaticHandlerOptions as RouterCreateStaticHandlerOptions,
   UNSAFE_RouteManifest as RouteManifest,
+  FutureConfig,
 } from "@remix-run/router";
 import {
   IDLE_BLOCKER,
@@ -224,7 +225,10 @@ export function createStaticHandler(
 
 export function createStaticRouter(
   routes: RouteObject[],
-  context: StaticHandlerContext
+  context: StaticHandlerContext,
+  opts?: {
+    future?: Partial<FutureConfig>;
+  }
 ): RemixRouter {
   let manifest: RouteManifest = {};
   let dataRoutes = convertRoutesToDataRoutes(

packages/react-router-native/index.tsx

@@ -108,6 +108,7 @@ export {
   useResolvedPath,
   useRevalidator,
   useRouteError,
+  useRouteId,
   useRouteLoaderData,
   useRoutes,
 } from "react-router";

packages/react-router/__tests__/data-memory-router-test.tsx

@@ -3346,11 +3346,6 @@ function MemoryNavigate({
 }) {
   let dataRouterContext = React.useContext(DataRouterContext);
 
-  let basename = dataRouterContext?.basename;
-  if (basename && basename !== "/") {
-    to = to === "/" ? basename : joinPaths([basename, to]);
-  }
-
   let onClickHandler = React.useCallback(
     async (event: React.MouseEvent) => {
       event.preventDefault();
@@ -3363,9 +3358,17 @@ function MemoryNavigate({
     [dataRouterContext, to, formMethod, formData]
   );
 
+  // Only prepend the basename to the rendered href, send the non-prefixed `to`
+  // value into the router since it will prepend the basename
+  let basename = dataRouterContext?.basename;
+  let href = to;
+  if (basename && basename !== "/") {
+    href = to === "/" ? basename : joinPaths([basename, to]);
+  }
+
   return formData ? (
     <form onClick={onClickHandler} children={children} />
   ) : (
-    <a href={to} onClick={onClickHandler} children={children} />
+    <a href={href} onClick={onClickHandler} children={children} />
   );
 }