react-router-dom-v5-compat 6.10.0 → 6.11.0-pre.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # `react-router-dom-v5-compat`
 
+## 6.11.0-pre.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.11.0-pre.1`
+  - `react-router@6.11.0-pre.1`
+
+## 6.11.0-pre.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.11.0-pre.0`
+  - `react-router-dom@6.11.0-pre.0`
+
 ## 6.10.0
 
 ### Patch Changes

package/LICENSE.md

@@ -1,7 +1,8 @@
 MIT License
 
-Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2022
+Copyright (c) React Training LLC 2015-2019
+Copyright (c) Remix Software Inc. 2020-2021
+Copyright (c) Shopify Inc. 2022-2023
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.d.ts

@@ -47,6 +47,6 @@
  *   deprecate the deep require if we wanted to avoid the duplication here.
  */
 export type { BrowserRouterProps, Hash, HashRouterProps, HistoryRouterProps, LinkProps, Location, Path, To, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigator, NavLinkProps, OutletProps, Params, ParamParseKey, PathMatch, RouteMatch, RouteObject, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, Pathname, Search, RoutesProps, ParamKeyValuePair, URLSearchParamsInit, ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, Fetcher, FetcherWithComponents, FormEncType, FormMethod, FormProps, GetScrollRestorationKeyFunction, IndexRouteObject, JsonFunction, LoaderFunction, LoaderFunctionArgs, Navigation, NonIndexRouteObject, PathPattern, RedirectFunction, RelativeRoutingType, RouterProviderProps, ScrollRestorationProps, ShouldRevalidateFunction, SubmitFunction, SubmitOptions, } from "./react-router-dom";
-export { BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, AbortedDeferredError, Await, RouterProvider, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromElements, defer, isRouteErrorResponse, Form, json, redirect, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, unstable_useBlocker, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useNavigation, unstable_usePrompt, useRevalidator, useRouteError, useRouteLoaderData, useSubmit, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_useScrollRestoration, } from "./react-router-dom";
+export { BrowserRouter, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, createSearchParams, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, unstable_HistoryRouter, useHref, useInRouterContext, useLinkClickHandler, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, AbortedDeferredError, Await, RouterProvider, ScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createRoutesFromElements, defer, isRouteErrorResponse, Form, json, redirect, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, unstable_useBlocker, useFetcher, useFetchers, useFormAction, useLoaderData, useMatches, useNavigation, unstable_usePrompt, useRevalidator, useRouteError, useRouteLoaderData, useSubmit, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_useScrollRestoration, UNSAFE_useRouteId, } from "./react-router-dom";
 export type { StaticRouterProps } from "./lib/components";
 export { CompatRouter, CompatRoute, StaticRouter } from "./lib/components";

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v5 Compat v6.10.0
+ * React Router DOM v5 Compat v6.11.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,9 +9,9 @@
  * @license MIT
  */
 import * as React from 'react';
-import { UNSAFE_detectErrorBoundary, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext, Routes, Route } from 'react-router';
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, 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 { createRouter, createBrowserHistory, createHashHistory, ErrorResponse, stripBasename, UNSAFE_warning, UNSAFE_invariant, joinPaths } from '@remix-run/router';
+import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_DataRouterContext, Routes, Route } 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 { parsePath, Action, createPath as createPath$1 } from 'history';
 import { Route as Route$1, useHistory } from 'react-router-dom';
 
@@ -119,16 +119,26 @@ function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
 
   return searchParams;
 }
-function getFormSubmissionInfo(target, defaultAction, options) {
+function getFormSubmissionInfo(target, options, basename) {
   let method;
-  let action;
+  let action = null;
   let encType;
   let formData;
 
   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;
-    action = options.action || target.getAttribute("action") || defaultAction;
     encType = options.encType || target.getAttribute("enctype") || defaultEncType;
     formData = new FormData(target);
 
@@ -143,8 +153,17 @@ function getFormSubmissionInfo(target, defaultAction, options) {
     } // <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;
-    action = options.action || target.getAttribute("formaction") || form.getAttribute("action") || defaultAction;
     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
@@ -156,7 +175,7 @@ function getFormSubmissionInfo(target, defaultAction, options) {
     throw new Error("Cannot submit element that is not <form>, <button>, or " + "<input type=\"submit|image\">");
   } else {
     method = options.method || defaultMethod;
-    action = options.action || defaultAction;
+    action = options.action || null;
     encType = options.encType || defaultEncType;
 
     if (target instanceof FormData) {
@@ -176,13 +195,8 @@ function getFormSubmissionInfo(target, defaultAction, options) {
     }
   }
 
-  let {
-    protocol,
-    host
-  } = window.location;
-  let url = new URL(action, protocol + "//" + host);
   return {
-    url,
+    action,
     method: method.toLowerCase(),
     encType,
     formData
@@ -195,25 +209,29 @@ const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state",
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
-    future: opts == null ? void 0 : opts.future,
+    future: _extends({}, opts == null ? void 0 : opts.future, {
+      v7_prependBasename: true
+    }),
     history: createBrowserHistory({
       window: opts == null ? void 0 : opts.window
     }),
     hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
     routes,
-    detectErrorBoundary: UNSAFE_detectErrorBoundary
+    mapRouteProperties: UNSAFE_mapRouteProperties
   }).initialize();
 }
 function createHashRouter(routes, opts) {
   return createRouter({
     basename: opts == null ? void 0 : opts.basename,
-    future: opts == null ? void 0 : opts.future,
+    future: _extends({}, opts == null ? void 0 : opts.future, {
+      v7_prependBasename: true
+    }),
     history: createHashHistory({
       window: opts == null ? void 0 : opts.window
     }),
     hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
     routes,
-    detectErrorBoundary: UNSAFE_detectErrorBoundary
+    mapRouteProperties: UNSAFE_mapRouteProperties
   }).initialize();
 }
 
@@ -383,15 +401,20 @@ const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref4, ref) {
     absoluteHref = to; // Only check for external origins client-side
 
     if (isBrowser) {
-      let currentUrl = new URL(window.location.href);
-      let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
-      let path = stripBasename(targetUrl.pathname, basename);
-
-      if (targetUrl.origin === currentUrl.origin && path != null) {
-        // Strip the protocol/origin/basename for same-origin absolute URLs
-        to = path + targetUrl.search + targetUrl.hash;
-      } else {
-        isExternal = true;
+      try {
+        let currentUrl = new URL(window.location.href);
+        let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
+        let path = stripBasename(targetUrl.pathname, basename);
+
+        if (targetUrl.origin === currentUrl.origin && path != null) {
+          // Strip the protocol/origin/basename for same-origin absolute URLs
+          to = path + targetUrl.search + targetUrl.hash;
+        } else {
+          isExternal = true;
+        }
+      } catch (e) {
+        // We can't do external URL detection without a valid URL
+        process.env.NODE_ENV !== "production" ? UNSAFE_warning(false, "<Link to=\"" + to + "\"> contains an invalid URL which will probably break " + "when clicked - please update to a valid URL path.") : void 0;
       }
     }
   } // Rendered into <a href> for relative URLs
@@ -689,11 +712,14 @@ function useSubmit() {
   return useSubmitImpl();
 }
 
-function useSubmitImpl(fetcherKey, routeId) {
+function useSubmitImpl(fetcherKey, fetcherRouteId) {
   let {
     router
   } = useDataRouterContext(DataRouterHook.UseSubmitImpl);
-  let defaultAction = useFormAction();
+  let {
+    basename
+  } = React.useContext(UNSAFE_NavigationContext);
+  let currentRouteId = UNSAFE_useRouteId();
   return React.useCallback(function (target, options) {
     if (options === void 0) {
       options = {};
@@ -704,14 +730,13 @@ function useSubmitImpl(fetcherKey, routeId) {
     }
 
     let {
+      action,
       method,
       encType,
-      formData,
-      url
-    } = getFormSubmissionInfo(target, defaultAction, options);
-    let href = url.pathname + url.search;
+      formData
+    } = getFormSubmissionInfo(target, options, basename); // Base options shared between fetch() and navigate()
+
     let opts = {
-      replace: options.replace,
       preventScrollReset: options.preventScrollReset,
       formData,
       formMethod: method,
@@ -719,13 +744,18 @@ function useSubmitImpl(fetcherKey, routeId) {
     };
 
     if (fetcherKey) {
-      !(routeId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
-      router.fetch(fetcherKey, routeId, href, opts);
+      !(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(href, opts);
+      router.navigate(action, _extends({}, opts, {
+        replace: options.replace,
+        fromRouteId: currentRouteId
+      }));
     }
-  }, [defaultAction, router, fetcherKey, routeId]);
-}
+  }, [router, basename, fetcherKey, fetcherRouteId, currentRouteId]);
+} // v7: Eventually we should deprecate this entirely in favor of using the
+// router method directly?
+
 
 function useFormAction(action, _temp2) {
   let {
@@ -836,7 +866,7 @@ function useFetcher() {
     // 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;
       }