react-router-dom-v5-compat - npm Package Compare versions

Comparing version 6.3.0 to 6.4.0-pre.0

index.d.ts

@@ -28,3 +28,3 @@ /**
  *   "../../react-router-dom" it's going to generate types from the common root
- *   of all module paths (Which makes sense becuase what else would it do? It
+ *   of all module paths (Which makes sense because what else would it do? It
  *   needs to write the type files next to the source files so that typescript
@@ -31,0 +31,0 @@ *   can resolve the types for tooling in the same location as the modules).

index.js

 /**
- * React Router DOM v5 Compat v6.3.0
+ * React Router DOM v5 Compat v6.4.0-pre.0
  *
@@ -11,6 +11,7 @@ * Copyright (c) Remix Software Inc.
  */
-import { useRef, useState, useLayoutEffect, createElement, forwardRef, useCallback, useMemo } from 'react';
-import { createBrowserHistory, createHashHistory, parsePath, Action, createPath as createPath$1 } from 'history';
-import { Router, useHref, createPath, useLocation, useResolvedPath, useNavigate, Routes, Route } from 'react-router';
+import { useRef, useState, useLayoutEffect, createElement, forwardRef, useCallback, useContext, useMemo } from 'react';
+import { Router, useHref, createPath, useResolvedPath, useMatch, UNSAFE_DataRouterStateContext, useNavigate, useLocation, UNSAFE_DataRouterContext, UNSAFE_RouteContext, Routes, Route } from 'react-router';
 export { MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes } from 'react-router';
+import { createBrowserHistory, createHashHistory, matchPath, invariant } from '@remix-run/router';
+import { parsePath, Action, createPath as createPath$1 } from 'history';
 import { Route as Route$1, useHistory } from 'react-router-dom';
@@ -51,27 +52,160 @@
 
-const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to"],
-      _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"];
+const defaultMethod = "get";
+const defaultEncType = "application/x-www-form-urlencoded";
+function isHtmlElement(object) {
+  return object != null && typeof object.tagName === "string";
+}
+function isButtonElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
+}
+function isFormElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
+}
+function isInputElement(object) {
+  return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
+}
 
-function warning(cond, message) {
-  if (!cond) {
-    // eslint-disable-next-line no-console
-    if (typeof console !== "undefined") console.warn(message);
+function isModifiedEvent(event) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
 
-    try {
-      // Welcome to debugging React Router!
-      //
-      // This error is thrown as a convenience so you can more easily
-      // find the source for a warning that appears in the console by
-      // enabling "pause on exceptions" in your JavaScript debugger.
-      throw new Error(message); // eslint-disable-next-line no-empty
-    } catch (e) {}
+function shouldProcessLinkClick(event, target) {
+  return event.button === 0 && ( // Ignore everything but left clicks
+  !target || target === "_self") && // Let browser handle "target=_blank" etc.
+  !isModifiedEvent(event) // Ignore clicks with modifier keys
+  ;
+}
+
+/**
+ * Creates a URLSearchParams object using the given initializer.
+ *
+ * This is identical to `new URLSearchParams(init)` except it also
+ * supports arrays as values in the object form of the initializer
+ * instead of just strings. This is convenient when you need multiple
+ * values for a given key, but don't want to use an array initializer.
+ *
+ * For example, instead of:
+ *
+ *   let searchParams = new URLSearchParams([
+ *     ['sort', 'name'],
+ *     ['sort', 'price']
+ *   ]);
+ *
+ * you can do:
+ *
+ *   let searchParams = createSearchParams({
+ *     sort: ['name', 'price']
+ *   });
+ */
+function createSearchParams(init) {
+  if (init === void 0) {
+    init = "";
   }
-} ////////////////////////////////////////////////////////////////////////////////
-// COMPONENTS
-////////////////////////////////////////////////////////////////////////////////
 
+  return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
+    let value = init[key];
+    return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
+  }, []));
+}
+function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
+  let searchParams = createSearchParams(locationSearch);
+
+  for (let key of defaultSearchParams.keys()) {
+    if (!searchParams.has(key)) {
+      defaultSearchParams.getAll(key).forEach(value => {
+        searchParams.append(key, value);
+      });
+    }
+  }
+
+  return searchParams;
+}
+function getFormSubmissionInfo(target, defaultAction, options) {
+  let method;
+  let action;
+  let encType;
+  let formData;
+
+  if (isFormElement(target)) {
+    let submissionTrigger = options.submissionTrigger;
+    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);
+
+    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>
+
+
+    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>
+
+    if (target.name) {
+      formData.set(target.name, target.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 || defaultAction;
+    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]);
+        }
+      }
+    }
+  }
+
+  let {
+    protocol,
+    host
+  } = window.location;
+  let url = new URL(action, protocol + "//" + host);
+
+  if (method.toLowerCase() === "get") {
+    for (let [name, value] of formData) {
+      if (typeof value === "string") {
+        url.searchParams.append(name, value);
+      } else {
+        throw new Error("Cannot submit binary form data using GET");
+      }
+    }
+  }
+
+  return {
+    url,
+    method,
+    encType,
+    formData
+  };
+}
+
+const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
+      _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
+      _excluded3 = ["replace", "method", "action", "onSubmit", "fetcherKey"];
+
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
-function BrowserRouter(_ref) {
+function BrowserRouter(_ref3) {
   let {
@@ -81,3 +215,3 @@ basename,
     window
-  } = _ref;
+  } = _ref3;
   let historyRef = useRef();
@@ -87,3 +221,4 @@
     historyRef.current = createBrowserHistory({
-      window
+      window,
+      v5Compat: true
     });
@@ -111,3 +246,3 @@ }
  */
-function HashRouter(_ref2) {
+function HashRouter(_ref4) {
   let {
@@ -117,3 +252,3 @@ basename,
     window
-  } = _ref2;
+  } = _ref4;
   let historyRef = useRef();
@@ -123,3 +258,4 @@
     historyRef.current = createHashHistory({
-      window
+      window,
+      v5Compat: true
     });
@@ -149,3 +285,3 @@ }
  */
-function HistoryRouter(_ref3) {
+function HistoryRouter(_ref5) {
   let {
@@ -155,3 +291,3 @@ basename,
     history
-  } = _ref3;
+  } = _ref5;
   const [state, setState] = useState({
@@ -175,10 +311,6 @@ action: history.action,
 
-function isModifiedEvent(event) {
-  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-}
-
 /**
  * The public API for rendering a history-aware <a>.
  */
-const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref4, ref) {
+const Link = /*#__PURE__*/forwardRef(function LinkWithRef(_ref6, ref) {
   let {
@@ -190,5 +322,6 @@ onClick,
     target,
-    to
-  } = _ref4,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    to,
+    resetScroll
+  } = _ref6,
+      rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
 
@@ -199,3 +332,4 @@ let href = useHref(to);
     state,
-    target
+    target,
+    resetScroll
   });
@@ -230,3 +364,3 @@
  */
-const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref5, ref) {
+const NavLink = /*#__PURE__*/forwardRef(function NavLinkWithRef(_ref7, ref) {
   let {
@@ -240,16 +374,21 @@ "aria-current": ariaCurrentProp = "page",
     children
-  } = _ref5,
-      rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+  } = _ref7,
+      rest = _objectWithoutPropertiesLoose(_ref7, _excluded2);
 
-  let location = useLocation();
   let path = useResolvedPath(to);
-  let locationPathname = location.pathname;
-  let toPathname = path.pathname;
-
-  if (!caseSensitive) {
-    locationPathname = locationPathname.toLowerCase();
-    toPathname = toPathname.toLowerCase();
-  }
-
-  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+  let match = useMatch({
+    path: path.pathname,
+    end,
+    caseSensitive
+  });
+  let routerState = useContext(UNSAFE_DataRouterStateContext);
+  let nextLocation = routerState == null ? void 0 : routerState.navigation.location;
+  let nextPath = useResolvedPath(nextLocation || "");
+  let nextMatch = useMemo(() => nextLocation ? matchPath({
+    path: path.pathname,
+    end,
+    caseSensitive
+  }, nextPath.pathname) : null, [nextLocation, path.pathname, caseSensitive, end, nextPath.pathname]);
+  let isPending = nextMatch != null;
+  let isActive = match != null;
   let ariaCurrent = isActive ? ariaCurrentProp : undefined;
@@ -260,3 +399,4 @@ let className;
     className = classNameProp({
-      isActive
+      isActive,
+      isPending
     });
@@ -269,7 +409,8 @@ } else {
     // simple styling rules working as they currently do.
-    className = [classNameProp, isActive ? "active" : null].filter(Boolean).join(" ");
+    className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
   }
 
   let style = typeof styleProp === "function" ? styleProp({
-    isActive
+    isActive,
+    isPending
   }) : styleProp;
@@ -283,3 +424,4 @@ return /*#__PURE__*/createElement(Link, _extends({}, rest, {
   }), typeof children === "function" ? children({
-    isActive
+    isActive,
+    isPending
   }) : children);
@@ -290,5 +432,61 @@ });
   NavLink.displayName = "NavLink";
-} ////////////////////////////////////////////////////////////////////////////////
-// HOOKS
+}
+
+/**
+ * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
+ * that the interaction with the server is with `fetch` instead of new document
+ * requests, allowing components to add nicer UX to the page as the form is
+ * submitted and returns with data.
+ */
+const Form = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/createElement(FormImpl, _extends({}, props, {
+    ref: ref
+  }));
+});
+
+if (process.env.NODE_ENV !== "production") {
+  Form.displayName = "Form";
+}
+
+const FormImpl = /*#__PURE__*/forwardRef((_ref8, forwardedRef) => {
+  let {
+    replace,
+    method = defaultMethod,
+    action = ".",
+    onSubmit,
+    fetcherKey
+  } = _ref8,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
+
+  let submit = useSubmitImpl(fetcherKey);
+  let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+  let formAction = useFormAction(action);
+
+  let submitHandler = event => {
+    onSubmit && onSubmit(event);
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    let submitter = event.nativeEvent.submitter;
+    submit(submitter || event.currentTarget, {
+      method,
+      replace
+    });
+  };
+
+  return /*#__PURE__*/createElement("form", _extends({
+    ref: forwardedRef,
+    method: formMethod,
+    action: formAction,
+    onSubmit: submitHandler
+  }, props));
+});
+
+if (process.env.NODE_ENV !== "production") {
+  Form.displayName = "Form";
+}
+
+if (process.env.NODE_ENV !== "production") ; //#endregion
 ////////////////////////////////////////////////////////////////////////////////
+//#region Hooks
+////////////////////////////////////////////////////////////////////////////////
 
@@ -306,3 +504,4 @@ /**
     replace: replaceProp,
-    state
+    state,
+    resetScroll
   } = _temp === void 0 ? {} : _temp;
@@ -313,6 +512,3 @@ let navigate = useNavigate();
   return useCallback(event => {
-    if (event.button === 0 && ( // Ignore everything but left clicks
-    !target || target === "_self") && // Let browser handle "target=_blank" etc.
-    !isModifiedEvent(event) // Ignore clicks with modifier keys
-    ) {
+    if (shouldProcessLinkClick(event, target)) {
       event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
@@ -322,8 +518,16 @@ // a push, so do the same here.
       let replace = !!replaceProp || createPath(location) === createPath(path);
+      let newState = state;
+
+      if (resetScroll === false) {
+        newState = _extends({}, state, {
+          __resetScrollPosition: false
+        });
+      }
+
       navigate(to, {
         replace,
-        state
+        state: newState
       });
     }
-  }, [location, navigate, path, replaceProp, state, target, to]);
+  }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
 }
@@ -339,15 +543,3 @@ /**
   let location = useLocation();
-  let searchParams = useMemo(() => {
-    let searchParams = createSearchParams(location.search);
-
-    for (let key of defaultSearchParamsRef.current.keys()) {
-      if (!searchParams.has(key)) {
-        defaultSearchParamsRef.current.getAll(key).forEach(value => {
-          searchParams.append(key, value);
-        });
-      }
-    }
-
-    return searchParams;
-  }, [location.search]);
+  let searchParams = useMemo(() => getSearchParamsForLocation(location.search, defaultSearchParamsRef.current), [location.search]);
   let navigate = useNavigate();
@@ -360,34 +552,80 @@ let setSearchParams = useCallback((nextInit, navigateOptions) => {
 
-/**
- * Creates a URLSearchParams object using the given initializer.
- *
- * This is identical to `new URLSearchParams(init)` except it also
- * supports arrays as values in the object form of the initializer
- * instead of just strings. This is convenient when you need multiple
- * values for a given key, but don't want to use an array initializer.
- *
- * For example, instead of:
- *
- *   let searchParams = new URLSearchParams([
- *     ['sort', 'name'],
- *     ['sort', 'price']
- *   ]);
- *
- * you can do:
- *
- *   let searchParams = createSearchParams({
- *     sort: ['name', 'price']
- *   });
- */
-function createSearchParams(init) {
-  if (init === void 0) {
-    init = "";
+function useSubmitImpl(fetcherKey) {
+  let router = useContext(UNSAFE_DataRouterContext);
+  let defaultAction = useFormAction();
+  return useCallback(function (target, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    !(router != null) ? process.env.NODE_ENV !== "production" ? invariant(false, "useSubmit() must be used within a <DataRouter>") : invariant(false) : void 0;
+
+    if (typeof document === "undefined") {
+      throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
+    }
+
+    let {
+      method,
+      encType,
+      formData,
+      url
+    } = getFormSubmissionInfo(target, defaultAction, options);
+    let href = url.pathname + url.search;
+    let opts = {
+      // If replace is not specified, we'll default to false for GET and
+      // true otherwise
+      replace: options.replace != null ? options.replace === true : method !== "get",
+      formData,
+      formMethod: method,
+      formEncType: encType
+    };
+
+    if (fetcherKey) {
+      router.fetch(fetcherKey, href, opts);
+    } else {
+      router.navigate(href, opts);
+    }
+  }, [defaultAction, router, fetcherKey]);
+}
+
+function useFormAction(action) {
+  if (action === void 0) {
+    action = ".";
   }
 
-  return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
-    let value = init[key];
-    return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
-  }, []));
+  let routeContext = useContext(UNSAFE_RouteContext);
+  !routeContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoaderData must be used inside a RouteContext") : invariant(false) : void 0;
+  let [match] = routeContext.matches.slice(-1);
+  let {
+    pathname,
+    search
+  } = useResolvedPath(action);
+
+  if (action === "." && match.route.index) {
+    search = search ? search.replace(/^\?/, "?index&") : "?index";
+  }
+
+  return pathname + search;
 }
+////////////////////////////////////////////////////////////////////////////////
+//#region Utils
+////////////////////////////////////////////////////////////////////////////////
 
+
+function warning(cond, message) {
+  if (!cond) {
+    // eslint-disable-next-line no-console
+    if (typeof console !== "undefined") console.warn(message);
+
+    try {
+      // Welcome to debugging React Router!
+      //
+      // This error is thrown as a convenience so you can more easily
+      // find the source for a warning that appears in the console by
+      // enabling "pause on exceptions" in your JavaScript debugger.
+      throw new Error(message); // eslint-disable-next-line no-empty
+    } catch (e) {}
+  }
+} //#endregion
+
 // but not worried about that for now.
@@ -431,3 +669,3 @@
 /**
- * A <Router> that may not transition to any other location. This is useful
+ * A <Router> that may not navigate to any other location. This is useful
  * on the server where there is no stateful UI.
@@ -434,0 +672,0 @@ */

lib/components.d.ts

@@ -13,5 +13,5 @@ import * as React from "react";
 /**
- * A <Router> that may not transition to any other location. This is useful
+ * A <Router> that may not navigate to any other location. This is useful
  * on the server where there is no stateful UI.
  */
 export declare function StaticRouter({ basename, children, location: locationProp, }: StaticRouterProps): JSX.Element;

LICENSE.md

 MIT License
 
 Copyright (c) React Training 2015-2019
-Copyright (c) Remix Software 2020-2021
+Copyright (c) Remix Software 2020-2022
 
@@ -6,0 +6,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

main.js

 /**
- * React Router DOM v5 Compat v6.3.0
+ * React Router DOM v5 Compat v6.4.0-pre.0
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

package.json

 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.3.0",
+  "version": "6.4.0-pre.0",
   "author": "Remix Software <[e-mail]>",
@@ -18,3 +18,3 @@ "description": "Migration path to React Router v6 from v4/5",
     "history": "^5.3.0",
-    "react-router": "6.3.0"
+    "react-router": "6.4.0-pre.0"
   },
@@ -21,0 +21,0 @@ "peerDependencies": {

react-router-dom/index.d.ts

@@ -6,10 +6,28 @@ /**
 import * as React from "react";
-import type { History } from "history";
-import { MemoryRouter, Navigate, Outlet, Route, Router, Routes, createRoutesFromChildren, generatePath, matchRoutes, matchPath, createPath, parsePath, resolvePath, renderMatches, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useRoutes, useOutletContext } from "react-router";
 import type { To } from "react-router";
-export { MemoryRouter, Navigate, Outlet, Route, Router, Routes, createRoutesFromChildren, generatePath, matchRoutes, matchPath, createPath, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useParams, useResolvedPath, useRoutes, useOutletContext, };
-export { NavigationType } from "react-router";
-export type { Hash, Location, Path, To, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigator, OutletProps, Params, PathMatch, RouteMatch, RouteObject, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, Pathname, Search, RoutesProps, } from "react-router";
+import type { Fetcher, FormMethod, History, HydrationState, GetScrollRestorationKeyFunction, RouteObject } from "@remix-run/router";
+import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
+import { createSearchParams } from "./dom";
+export type { ParamKeyValuePair, URLSearchParamsInit };
+export { createSearchParams };
+export type { ActionFunction, DataMemoryRouterProps, DataRouteMatch, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
+export { DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
-export { UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, } from "react-router";
+export { UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, useRenderDataRouter, } from "react-router";
+export interface DataBrowserRouterProps {
+    children?: React.ReactNode;
+    hydrationData?: HydrationState;
+    fallbackElement: React.ReactElement;
+    routes?: RouteObject[];
+    window?: Window;
+}
+export declare function DataBrowserRouter({ children, fallbackElement, hydrationData, routes, window, }: DataBrowserRouterProps): React.ReactElement;
+export interface DataHashRouterProps {
+    children?: React.ReactNode;
+    hydrationData?: HydrationState;
+    fallbackElement: React.ReactElement;
+    routes?: RouteObject[];
+    window?: Window;
+}
+export declare function DataHashRouter({ children, hydrationData, fallbackElement, routes, window, }: DataBrowserRouterProps): React.ReactElement;
 export interface BrowserRouterProps {
@@ -54,2 +72,3 @@ basename?: string;
     state?: any;
+    resetScroll?: boolean;
     to: To;
@@ -64,2 +83,3 @@ }
         isActive: boolean;
+        isPending: boolean;
     }) => React.ReactNode);
@@ -69,2 +89,3 @@ caseSensitive?: boolean;
         isActive: boolean;
+        isPending: boolean;
     }) => string | undefined);
@@ -74,2 +95,3 @@ end?: boolean;
         isActive: boolean;
+        isPending: boolean;
     }) => React.CSSProperties);
@@ -81,3 +103,44 @@ }
 export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * The HTTP verb to use when the form is submit. Supports "get", "post",
+     * "put", "delete", "patch".
+     */
+    method?: FormMethod;
+    /**
+     * Normal `<form action>` but supports React Router's relative paths.
+     */
+    action?: string;
+    /**
+     * Replaces the current entry in the browser history stack when the form
+     * navigates. Use this if you don't want the user to be able to click "back"
+     * to the page with the form on it.
+     */
+    replace?: boolean;
+    /**
+     * A function to call when the form is submitted. If you call
+     * `event.preventDefault()` then this form will not do anything.
+     */
+    onSubmit?: React.FormEventHandler<HTMLFormElement>;
+}
 /**
+ * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
+ * that the interaction with the server is with `fetch` instead of new document
+ * requests, allowing components to add nicer UX to the page as the form is
+ * submitted and returns with data.
+ */
+export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+interface ScrollRestorationProps {
+    getKey?: GetScrollRestorationKeyFunction;
+    storageKey?: string;
+}
+/**
+ * This component will emulate the browser's scroll restoration on location
+ * changes.
+ */
+export declare function ScrollRestoration({ getKey, storageKey, }: ScrollRestorationProps): null;
+export declare namespace ScrollRestoration {
+    var displayName: string;
+}
+/**
  * Handles the click behavior for router `<Link>` components. This is useful if
@@ -87,6 +150,7 @@ * you need to create custom `<Link>` components with the same click behavior we
  */
-export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, }?: {
+export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, resetScroll, }?: {
     target?: React.HTMLAttributeAnchorTarget;
     replace?: boolean;
     state?: any;
+    resetScroll?: boolean;
 }): (event: React.MouseEvent<E, MouseEvent>) => void;
@@ -101,25 +165,46 @@ /**
 } | undefined) => void];
-export declare type ParamKeyValuePair = [string, string];
-export declare type URLSearchParamsInit = string | ParamKeyValuePair[] | Record<string, string | string[]> | URLSearchParams;
 /**
- * Creates a URLSearchParams object using the given initializer.
- *
- * This is identical to `new URLSearchParams(init)` except it also
- * supports arrays as values in the object form of the initializer
- * instead of just strings. This is convenient when you need multiple
- * values for a given key, but don't want to use an array initializer.
- *
- * For example, instead of:
- *
- *   let searchParams = new URLSearchParams([
- *     ['sort', 'name'],
- *     ['sort', 'price']
- *   ]);
- *
- * you can do:
- *
- *   let searchParams = createSearchParams({
- *     sort: ['name', 'price']
- *   });
+ * Submits a HTML `<form>` to the server without reloading the page.
  */
-export declare function createSearchParams(init?: URLSearchParamsInit): URLSearchParams;
+export interface SubmitFunction {
+    (
+    /**
+     * Specifies the `<form>` to be submitted to the server, a specific
+     * `<button>` or `<input type="submit">` to use to submit the form, or some
+     * arbitrary data to submit.
+     *
+     * Note: When using a `<button>` its `name` and `value` will also be
+     * included in the form data that is submitted.
+     */
+    target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {
+        [name: string]: string;
+    } | null, 
+    /**
+     * Options that override the `<form>`'s own attributes. Required when
+     * submitting arbitrary data without a backing `<form>`.
+     */
+    options?: SubmitOptions): void;
+}
+/**
+ * Returns a function that may be used to programmatically submit a form (or
+ * some arbitrary data) to the server.
+ */
+export declare function useSubmit(): SubmitFunction;
+declare function useSubmitImpl(fetcherKey?: string): SubmitFunction;
+export declare function useFormAction(action?: string): string;
+declare function createFetcherForm(fetcherKey: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+declare type FetcherWithComponents<TData> = Fetcher<TData> & {
+    Form: ReturnType<typeof createFetcherForm>;
+    submit: ReturnType<typeof useSubmitImpl>;
+    load: (href: string) => void;
+};
+/**
+ * Interacts with route loaders and actions without causing a navigation. Great
+ * for any interaction that stays on the same page.
+ */
+export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
+/**
+ * Provides all fetchers currently on the page. Useful for layouts and parent
+ * routes that need to provide pending/optimistic UI regarding the fetch.
+ */
+export declare function useFetchers(): Fetcher[];

umd/react-router-dom-v5-compat.development.js

 /**
- * React Router DOM v5 Compat v6.3.0
+ * React Router DOM v5 Compat v6.4.0-pre.0
  *
@@ -12,6 +12,6 @@ * Copyright (c) Remix Software Inc.
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('history'), require('react-router'), require('react-router-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'history', 'react-router', 'react-router-dom'], factory) :
-  (global = global || self, factory(global.ReactRouterDOMv5Compat = {}, global.React, global.HistoryLibrary, global.ReactRouter, global.ReactRouterDOM));
-}(this, (function (exports, React, history, reactRouter, reactRouterDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-router'), require('@remix-run/router'), require('history'), require('react-router-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-router', '@remix-run/router', 'history', 'react-router-dom'], factory) :
+  (global = global || self, factory(global.ReactRouterDOMv5Compat = {}, global.React, global.ReactRouter, global.Router, global.HistoryLibrary, global.ReactRouterDOM));
+}(this, (function (exports, React, reactRouter, router, history, reactRouterDom) { 'use strict';
 
@@ -51,27 +51,160 @@ function _extends() {
 
-  const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to"],
-        _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"];
+  const defaultMethod = "get";
+  const defaultEncType = "application/x-www-form-urlencoded";
+  function isHtmlElement(object) {
+    return object != null && typeof object.tagName === "string";
+  }
+  function isButtonElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
+  }
+  function isFormElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
+  }
+  function isInputElement(object) {
+    return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
+  }
 
-  function warning(cond, message) {
-    if (!cond) {
-      // eslint-disable-next-line no-console
-      if (typeof console !== "undefined") console.warn(message);
+  function isModifiedEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+  }
 
-      try {
-        // Welcome to debugging React Router!
-        //
-        // This error is thrown as a convenience so you can more easily
-        // find the source for a warning that appears in the console by
-        // enabling "pause on exceptions" in your JavaScript debugger.
-        throw new Error(message); // eslint-disable-next-line no-empty
-      } catch (e) {}
+  function shouldProcessLinkClick(event, target) {
+    return event.button === 0 && ( // Ignore everything but left clicks
+    !target || target === "_self") && // Let browser handle "target=_blank" etc.
+    !isModifiedEvent(event) // Ignore clicks with modifier keys
+    ;
+  }
+
+  /**
+   * Creates a URLSearchParams object using the given initializer.
+   *
+   * This is identical to `new URLSearchParams(init)` except it also
+   * supports arrays as values in the object form of the initializer
+   * instead of just strings. This is convenient when you need multiple
+   * values for a given key, but don't want to use an array initializer.
+   *
+   * For example, instead of:
+   *
+   *   let searchParams = new URLSearchParams([
+   *     ['sort', 'name'],
+   *     ['sort', 'price']
+   *   ]);
+   *
+   * you can do:
+   *
+   *   let searchParams = createSearchParams({
+   *     sort: ['name', 'price']
+   *   });
+   */
+  function createSearchParams(init) {
+    if (init === void 0) {
+      init = "";
     }
-  } ////////////////////////////////////////////////////////////////////////////////
-  // COMPONENTS
-  ////////////////////////////////////////////////////////////////////////////////
 
+    return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
+      let value = init[key];
+      return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
+    }, []));
+  }
+  function getSearchParamsForLocation(locationSearch, defaultSearchParams) {
+    let searchParams = createSearchParams(locationSearch);
+
+    for (let key of defaultSearchParams.keys()) {
+      if (!searchParams.has(key)) {
+        defaultSearchParams.getAll(key).forEach(value => {
+          searchParams.append(key, value);
+        });
+      }
+    }
+
+    return searchParams;
+  }
+  function getFormSubmissionInfo(target, defaultAction, options) {
+    let method;
+    let action;
+    let encType;
+    let formData;
+
+    if (isFormElement(target)) {
+      let submissionTrigger = options.submissionTrigger;
+      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);
+
+      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>
+
+
+      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>
+
+      if (target.name) {
+        formData.set(target.name, target.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 || defaultAction;
+      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]);
+          }
+        }
+      }
+    }
+
+    let {
+      protocol,
+      host
+    } = window.location;
+    let url = new URL(action, protocol + "//" + host);
+
+    if (method.toLowerCase() === "get") {
+      for (let [name, value] of formData) {
+        if (typeof value === "string") {
+          url.searchParams.append(name, value);
+        } else {
+          throw new Error("Cannot submit binary form data using GET");
+        }
+      }
+    }
+
+    return {
+      url,
+      method,
+      encType,
+      formData
+    };
+  }
+
+  const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
+        _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
+        _excluded3 = ["replace", "method", "action", "onSubmit", "fetcherKey"];
+
   /**
    * A `<Router>` for use in web browsers. Provides the cleanest URLs.
    */
-  function BrowserRouter(_ref) {
+  function BrowserRouter(_ref3) {
     let {
@@ -81,17 +214,18 @@ basename,
       window
-    } = _ref;
+    } = _ref3;
     let historyRef = React.useRef();
 
     if (historyRef.current == null) {
-      historyRef.current = history.createBrowserHistory({
-        window
+      historyRef.current = router.createBrowserHistory({
+        window,
+        v5Compat: true
       });
     }
 
-    let history$1 = historyRef.current;
+    let history = historyRef.current;
     let [state, setState] = React.useState({
-      action: history$1.action,
-      location: history$1.location
+      action: history.action,
+      location: history.location
     });
-    React.useLayoutEffect(() => history$1.listen(setState), [history$1]);
+    React.useLayoutEffect(() => history.listen(setState), [history]);
     return /*#__PURE__*/React.createElement(reactRouter.Router, {
@@ -102,3 +236,3 @@ basename: basename,
       navigationType: state.action,
-      navigator: history$1
+      navigator: history
     });
@@ -111,3 +245,3 @@ }
    */
-  function HashRouter(_ref2) {
+  function HashRouter(_ref4) {
     let {
@@ -117,17 +251,18 @@ basename,
       window
-    } = _ref2;
+    } = _ref4;
     let historyRef = React.useRef();
 
     if (historyRef.current == null) {
-      historyRef.current = history.createHashHistory({
-        window
+      historyRef.current = router.createHashHistory({
+        window,
+        v5Compat: true
       });
     }
 
-    let history$1 = historyRef.current;
+    let history = historyRef.current;
     let [state, setState] = React.useState({
-      action: history$1.action,
-      location: history$1.location
+      action: history.action,
+      location: history.location
     });
-    React.useLayoutEffect(() => history$1.listen(setState), [history$1]);
+    React.useLayoutEffect(() => history.listen(setState), [history]);
     return /*#__PURE__*/React.createElement(reactRouter.Router, {
@@ -138,3 +273,3 @@ basename: basename,
       navigationType: state.action,
-      navigator: history$1
+      navigator: history
     });
@@ -149,3 +284,3 @@ }
    */
-  function HistoryRouter(_ref3) {
+  function HistoryRouter(_ref5) {
     let {
@@ -155,3 +290,3 @@ basename,
       history
-    } = _ref3;
+    } = _ref5;
     const [state, setState] = React.useState({
@@ -175,10 +310,6 @@ action: history.action,
 
-  function isModifiedEvent(event) {
-    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
-  }
-
   /**
    * The public API for rendering a history-aware <a>.
    */
-  const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref4, ref) {
+  const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref6, ref) {
     let {
@@ -190,5 +321,6 @@ onClick,
       target,
-      to
-    } = _ref4,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+      to,
+      resetScroll
+    } = _ref6,
+        rest = _objectWithoutPropertiesLoose(_ref6, _excluded);
 
@@ -199,3 +331,4 @@ let href = reactRouter.useHref(to);
       state,
-      target
+      target,
+      resetScroll
     });
@@ -230,3 +363,3 @@
    */
-  const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref5, ref) {
+  const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref7, ref) {
     let {
@@ -240,16 +373,21 @@ "aria-current": ariaCurrentProp = "page",
       children
-    } = _ref5,
-        rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+    } = _ref7,
+        rest = _objectWithoutPropertiesLoose(_ref7, _excluded2);
 
-    let location = reactRouter.useLocation();
     let path = reactRouter.useResolvedPath(to);
-    let locationPathname = location.pathname;
-    let toPathname = path.pathname;
-
-    if (!caseSensitive) {
-      locationPathname = locationPathname.toLowerCase();
-      toPathname = toPathname.toLowerCase();
-    }
-
-    let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+    let match = reactRouter.useMatch({
+      path: path.pathname,
+      end,
+      caseSensitive
+    });
+    let routerState = React.useContext(reactRouter.UNSAFE_DataRouterStateContext);
+    let nextLocation = routerState == null ? void 0 : routerState.navigation.location;
+    let nextPath = reactRouter.useResolvedPath(nextLocation || "");
+    let nextMatch = React.useMemo(() => nextLocation ? router.matchPath({
+      path: path.pathname,
+      end,
+      caseSensitive
+    }, nextPath.pathname) : null, [nextLocation, path.pathname, caseSensitive, end, nextPath.pathname]);
+    let isPending = nextMatch != null;
+    let isActive = match != null;
     let ariaCurrent = isActive ? ariaCurrentProp : undefined;
@@ -260,3 +398,4 @@ let className;
       className = classNameProp({
-        isActive
+        isActive,
+        isPending
       });
@@ -269,7 +408,8 @@ } else {
       // simple styling rules working as they currently do.
-      className = [classNameProp, isActive ? "active" : null].filter(Boolean).join(" ");
+      className = [classNameProp, isActive ? "active" : null, isPending ? "pending" : null].filter(Boolean).join(" ");
     }
 
     let style = typeof styleProp === "function" ? styleProp({
-      isActive
+      isActive,
+      isPending
     }) : styleProp;
@@ -283,3 +423,4 @@ return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
     }), typeof children === "function" ? children({
-      isActive
+      isActive,
+      isPending
     }) : children);
@@ -290,5 +431,59 @@ });
     NavLink.displayName = "NavLink";
-  } ////////////////////////////////////////////////////////////////////////////////
-  // HOOKS
+  }
+
+  /**
+   * A `@remix-run/router`-aware `<form>`. It behaves like a normal form except
+   * that the interaction with the server is with `fetch` instead of new document
+   * requests, allowing components to add nicer UX to the page as the form is
+   * submitted and returns with data.
+   */
+  const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
+    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
+      ref: ref
+    }));
+  });
+
+  {
+    Form.displayName = "Form";
+  }
+
+  const FormImpl = /*#__PURE__*/React.forwardRef((_ref8, forwardedRef) => {
+    let {
+      replace,
+      method = defaultMethod,
+      action = ".",
+      onSubmit,
+      fetcherKey
+    } = _ref8,
+        props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
+
+    let submit = useSubmitImpl(fetcherKey);
+    let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    let formAction = useFormAction(action);
+
+    let submitHandler = event => {
+      onSubmit && onSubmit(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      let submitter = event.nativeEvent.submitter;
+      submit(submitter || event.currentTarget, {
+        method,
+        replace
+      });
+    };
+
+    return /*#__PURE__*/React.createElement("form", _extends({
+      ref: forwardedRef,
+      method: formMethod,
+      action: formAction,
+      onSubmit: submitHandler
+    }, props));
+  });
+
+  {
+    Form.displayName = "Form";
+  }
   ////////////////////////////////////////////////////////////////////////////////
+  //#region Hooks
+  ////////////////////////////////////////////////////////////////////////////////
 
@@ -306,3 +501,4 @@ /**
       replace: replaceProp,
-      state
+      state,
+      resetScroll
     } = _temp === void 0 ? {} : _temp;
@@ -313,6 +509,3 @@ let navigate = reactRouter.useNavigate();
     return React.useCallback(event => {
-      if (event.button === 0 && ( // Ignore everything but left clicks
-      !target || target === "_self") && // Let browser handle "target=_blank" etc.
-      !isModifiedEvent(event) // Ignore clicks with modifier keys
-      ) {
+      if (shouldProcessLinkClick(event, target)) {
         event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
@@ -322,8 +515,16 @@ // a push, so do the same here.
         let replace = !!replaceProp || reactRouter.createPath(location) === reactRouter.createPath(path);
+        let newState = state;
+
+        if (resetScroll === false) {
+          newState = _extends({}, state, {
+            __resetScrollPosition: false
+          });
+        }
+
         navigate(to, {
           replace,
-          state
+          state: newState
         });
       }
-    }, [location, navigate, path, replaceProp, state, target, to]);
+    }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
   }
@@ -339,15 +540,3 @@ /**
     let location = reactRouter.useLocation();
-    let searchParams = React.useMemo(() => {
-      let searchParams = createSearchParams(location.search);
-
-      for (let key of defaultSearchParamsRef.current.keys()) {
-        if (!searchParams.has(key)) {
-          defaultSearchParamsRef.current.getAll(key).forEach(value => {
-            searchParams.append(key, value);
-          });
-        }
-      }
-
-      return searchParams;
-    }, [location.search]);
+    let searchParams = React.useMemo(() => getSearchParamsForLocation(location.search, defaultSearchParamsRef.current), [location.search]);
     let navigate = reactRouter.useNavigate();
@@ -360,34 +549,80 @@ let setSearchParams = React.useCallback((nextInit, navigateOptions) => {
 
-  /**
-   * Creates a URLSearchParams object using the given initializer.
-   *
-   * This is identical to `new URLSearchParams(init)` except it also
-   * supports arrays as values in the object form of the initializer
-   * instead of just strings. This is convenient when you need multiple
-   * values for a given key, but don't want to use an array initializer.
-   *
-   * For example, instead of:
-   *
-   *   let searchParams = new URLSearchParams([
-   *     ['sort', 'name'],
-   *     ['sort', 'price']
-   *   ]);
-   *
-   * you can do:
-   *
-   *   let searchParams = createSearchParams({
-   *     sort: ['name', 'price']
-   *   });
-   */
-  function createSearchParams(init) {
-    if (init === void 0) {
-      init = "";
+  function useSubmitImpl(fetcherKey) {
+    let router$1 = React.useContext(reactRouter.UNSAFE_DataRouterContext);
+    let defaultAction = useFormAction();
+    return React.useCallback(function (target, options) {
+      if (options === void 0) {
+        options = {};
+      }
+
+      !(router$1 != null) ?  router.invariant(false, "useSubmit() must be used within a <DataRouter>")  : void 0;
+
+      if (typeof document === "undefined") {
+        throw new Error("You are calling submit during the server render. " + "Try calling submit within a `useEffect` or callback instead.");
+      }
+
+      let {
+        method,
+        encType,
+        formData,
+        url
+      } = getFormSubmissionInfo(target, defaultAction, options);
+      let href = url.pathname + url.search;
+      let opts = {
+        // If replace is not specified, we'll default to false for GET and
+        // true otherwise
+        replace: options.replace != null ? options.replace === true : method !== "get",
+        formData,
+        formMethod: method,
+        formEncType: encType
+      };
+
+      if (fetcherKey) {
+        router$1.fetch(fetcherKey, href, opts);
+      } else {
+        router$1.navigate(href, opts);
+      }
+    }, [defaultAction, router$1, fetcherKey]);
+  }
+
+  function useFormAction(action) {
+    if (action === void 0) {
+      action = ".";
     }
 
-    return new URLSearchParams(typeof init === "string" || Array.isArray(init) || init instanceof URLSearchParams ? init : Object.keys(init).reduce((memo, key) => {
-      let value = init[key];
-      return memo.concat(Array.isArray(value) ? value.map(v => [key, v]) : [[key, value]]);
-    }, []));
+    let routeContext = React.useContext(reactRouter.UNSAFE_RouteContext);
+    !routeContext ?  router.invariant(false, "useLoaderData must be used inside a RouteContext")  : void 0;
+    let [match] = routeContext.matches.slice(-1);
+    let {
+      pathname,
+      search
+    } = reactRouter.useResolvedPath(action);
+
+    if (action === "." && match.route.index) {
+      search = search ? search.replace(/^\?/, "?index&") : "?index";
+    }
+
+    return pathname + search;
   }
+  ////////////////////////////////////////////////////////////////////////////////
+  //#region Utils
+  ////////////////////////////////////////////////////////////////////////////////
 
+
+  function warning(cond, message) {
+    if (!cond) {
+      // eslint-disable-next-line no-console
+      if (typeof console !== "undefined") console.warn(message);
+
+      try {
+        // Welcome to debugging React Router!
+        //
+        // This error is thrown as a convenience so you can more easily
+        // find the source for a warning that appears in the console by
+        // enabling "pause on exceptions" in your JavaScript debugger.
+        throw new Error(message); // eslint-disable-next-line no-empty
+      } catch (e) {}
+    }
+  } //#endregion
+
   // but not worried about that for now.
@@ -431,3 +666,3 @@
   /**
-   * A <Router> that may not transition to any other location. This is useful
+   * A <Router> that may not navigate to any other location. This is useful
    * on the server where there is no stateful UI.
@@ -434,0 +669,0 @@ */

umd/react-router-dom-v5-compat.production.min.js

 /**
- * React Router DOM v5 Compat v6.3.0
+ * React Router DOM v5 Compat v6.4.0-pre.0
  *
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("history"),require("react-router"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","history","react-router","react-router-dom"],t):t((e=e||self).ReactRouterDOMv5Compat={},e.React,e.HistoryLibrary,e.ReactRouter,e.ReactRouterDOM)}(this,(function(e,t,r,n,a){"use strict";function o(){return o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o.apply(this,arguments)}function u(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}const i=["onClick","reloadDocument","replace","state","target","to"],c=["aria-current","caseSensitive","className","end","style","to","children"];const s=t.forwardRef((function(e,r){let{onClick:a,reloadDocument:c,replace:s=!1,state:l,target:h,to:p}=e,y=u(e,i),m=n.useHref(p),b=f(p,{replace:s,state:l,target:h});return t.createElement("a",o({},y,{href:m,onClick:function(e){a&&a(e),e.defaultPrevented||c||b(e)},ref:r,target:h}))})),l=t.forwardRef((function(e,r){let{"aria-current":a="page",caseSensitive:i=!1,className:l="",end:f=!1,style:h,to:p,children:y}=e,m=u(e,c),b=n.useLocation(),d=n.useResolvedPath(p),g=b.pathname,v=d.pathname;i||(g=g.toLowerCase(),v=v.toLowerCase());let P,R=g===v||!f&&g.startsWith(v)&&"/"===g.charAt(v.length),O=R?a:void 0;P="function"==typeof l?l({isActive:R}):[l,R?"active":null].filter(Boolean).join(" ");let w="function"==typeof h?h({isActive:R}):h;return t.createElement(s,o({},m,{"aria-current":O,className:P,ref:r,style:w,to:p}),"function"==typeof y?y({isActive:R}):y)}));function f(e,r){let{target:a,replace:o,state:u}=void 0===r?{}:r,i=n.useNavigate(),c=n.useLocation(),s=n.useResolvedPath(e);return t.useCallback((t=>{if(!(0!==t.button||a&&"_self"!==a||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(t))){t.preventDefault();let r=!!o||n.createPath(c)===n.createPath(s);i(e,{replace:r,state:u})}}),[c,i,s,o,u,a,e])}function h(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return n.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return n.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return n.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return n.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return n.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return n.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return n.Routes}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return n.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return n.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return n.UNSAFE_RouteContext}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return n.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return n.createRoutesFromChildren}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return n.generatePath}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return n.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return n.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return n.parsePath}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return n.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return n.resolvePath}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return n.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return n.useInRouterContext}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return n.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return n.useMatch}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return n.useNavigate}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return n.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return n.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return n.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return n.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return n.useResolvedPath}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return n.useRoutes}}),e.BrowserRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createBrowserHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{path:r}=e;return e.exact||(r+="/*"),t.createElement(n.Routes,null,t.createElement(n.Route,{path:r,element:t.createElement(a.Route,e)}))},e.CompatRouter=function(e){let{children:r}=e,o=a.useHistory(),[u,i]=t.useState((()=>({location:o.location,action:o.action})));return t.useLayoutEffect((()=>{o.listen(((e,t)=>i({location:e,action:t})))}),[o]),t.createElement(n.Router,{navigationType:u.action,location:u.location,navigator:o},t.createElement(n.Routes,null,t.createElement(n.Route,{path:"*",element:r})))},e.HashRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=r.createHashHistory({window:u}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(n.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Link=s,e.NavLink=l,e.StaticRouter=function(e){let{basename:a,children:o,location:u="/"}=e;"string"==typeof u&&(u=r.parsePath(u));let i=r.Action.Pop,c={pathname:u.pathname||"/",search:u.search||"",hash:u.hash||"",state:u.state||null,key:u.key||"default"},s={createHref:e=>"string"==typeof e?e:r.createPath(e),push(e){throw new Error("You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+")` somewhere in your app.")},replace(e){throw new Error("You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+", { replace: true })` somewhere in your app.")},go(e){throw new Error("You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+e+")` somewhere in your app.")},back(){throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.")},forward(){throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.")}};return t.createElement(n.Router,{basename:a,children:o,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=h,e.unstable_HistoryRouter=function(e){let{basename:r,children:a,history:o}=e;const[u,i]=t.useState({action:o.action,location:o.location});return t.useLayoutEffect((()=>o.listen(i)),[o]),t.createElement(n.Router,{basename:r,children:a,location:u.location,navigationType:u.action,navigator:o})},e.useLinkClickHandler=f,e.useSearchParams=function(e){let r=t.useRef(h(e)),a=n.useLocation(),o=t.useMemo((()=>{let e=h(a.search);for(let t of r.current.keys())e.has(t)||r.current.getAll(t).forEach((r=>{e.append(t,r)}));return e}),[a.search]),u=n.useNavigate();return[o,t.useCallback(((e,t)=>{u("?"+h(e),t)}),[u])]},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-router"),require("@remix-run/router"),require("history"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-router","@remix-run/router","history","react-router-dom"],t):t((e=e||self).ReactRouterDOMv5Compat={},e.React,e.ReactRouter,e.Router,e.HistoryLibrary,e.ReactRouterDOM)}(this,(function(e,t,r,n,a,o){"use strict";function u(){return u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function i(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}function c(e){return void 0===e&&(e=""),new URLSearchParams("string"==typeof e||Array.isArray(e)||e instanceof URLSearchParams?e:Object.keys(e).reduce(((t,r)=>{let n=e[r];return t.concat(Array.isArray(n)?n.map((e=>[r,e])):[[r,n]])}),[]))}const s=["onClick","reloadDocument","replace","state","target","to","resetScroll"],l=["aria-current","caseSensitive","className","end","style","to","children"];const f=t.forwardRef((function(e,n){let{onClick:a,reloadDocument:o,replace:c=!1,state:l,target:f,to:h,resetScroll:m}=e,d=i(e,s),y=r.useHref(h),b=p(h,{replace:c,state:l,target:f,resetScroll:m});return t.createElement("a",u({},d,{href:y,onClick:function(e){a&&a(e),e.defaultPrevented||o||b(e)},ref:n,target:f}))})),h=t.forwardRef((function(e,a){let o,{"aria-current":c="page",caseSensitive:s=!1,className:h="",end:p=!1,style:m,to:d,children:y}=e,b=i(e,l),g=r.useResolvedPath(d),v=r.useMatch({path:g.pathname,end:p,caseSensitive:s}),P=t.useContext(r.UNSAFE_DataRouterStateContext),R=null==P?void 0:P.navigation.location,O=r.useResolvedPath(R||""),j=null!=t.useMemo((()=>R?n.matchPath({path:g.pathname,end:p,caseSensitive:s},O.pathname):null),[R,g.pathname,s,p,O.pathname]),w=null!=v,E=w?c:void 0;o="function"==typeof h?h({isActive:w,isPending:j}):[h,w?"active":null,j?"pending":null].filter(Boolean).join(" ");let S="function"==typeof m?m({isActive:w,isPending:j}):m;return t.createElement(f,u({},b,{"aria-current":E,className:o,ref:a,style:S,to:d}),"function"==typeof y?y({isActive:w,isPending:j}):y)}));function p(e,n){let{target:a,replace:o,state:i,resetScroll:c}=void 0===n?{}:n,s=r.useNavigate(),l=r.useLocation(),f=r.useResolvedPath(e);return t.useCallback((t=>{if(function(e,t){return!(0!==e.button||t&&"_self"!==t||function(e){return!!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)}(e))}(t,a)){t.preventDefault();let n=!!o||r.createPath(l)===r.createPath(f),a=i;!1===c&&(a=u({},i,{__resetScrollPosition:!1})),s(e,{replace:n,state:a})}}),[l,s,f,o,i,a,e,c])}Object.defineProperty(e,"MemoryRouter",{enumerable:!0,get:function(){return r.MemoryRouter}}),Object.defineProperty(e,"Navigate",{enumerable:!0,get:function(){return r.Navigate}}),Object.defineProperty(e,"NavigationType",{enumerable:!0,get:function(){return r.NavigationType}}),Object.defineProperty(e,"Outlet",{enumerable:!0,get:function(){return r.Outlet}}),Object.defineProperty(e,"Route",{enumerable:!0,get:function(){return r.Route}}),Object.defineProperty(e,"Router",{enumerable:!0,get:function(){return r.Router}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return r.Routes}}),Object.defineProperty(e,"UNSAFE_LocationContext",{enumerable:!0,get:function(){return r.UNSAFE_LocationContext}}),Object.defineProperty(e,"UNSAFE_NavigationContext",{enumerable:!0,get:function(){return r.UNSAFE_NavigationContext}}),Object.defineProperty(e,"UNSAFE_RouteContext",{enumerable:!0,get:function(){return r.UNSAFE_RouteContext}}),Object.defineProperty(e,"createPath",{enumerable:!0,get:function(){return r.createPath}}),Object.defineProperty(e,"createRoutesFromChildren",{enumerable:!0,get:function(){return r.createRoutesFromChildren}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return r.generatePath}}),Object.defineProperty(e,"matchPath",{enumerable:!0,get:function(){return r.matchPath}}),Object.defineProperty(e,"matchRoutes",{enumerable:!0,get:function(){return r.matchRoutes}}),Object.defineProperty(e,"parsePath",{enumerable:!0,get:function(){return r.parsePath}}),Object.defineProperty(e,"renderMatches",{enumerable:!0,get:function(){return r.renderMatches}}),Object.defineProperty(e,"resolvePath",{enumerable:!0,get:function(){return r.resolvePath}}),Object.defineProperty(e,"useHref",{enumerable:!0,get:function(){return r.useHref}}),Object.defineProperty(e,"useInRouterContext",{enumerable:!0,get:function(){return r.useInRouterContext}}),Object.defineProperty(e,"useLocation",{enumerable:!0,get:function(){return r.useLocation}}),Object.defineProperty(e,"useMatch",{enumerable:!0,get:function(){return r.useMatch}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return r.useNavigate}}),Object.defineProperty(e,"useNavigationType",{enumerable:!0,get:function(){return r.useNavigationType}}),Object.defineProperty(e,"useOutlet",{enumerable:!0,get:function(){return r.useOutlet}}),Object.defineProperty(e,"useOutletContext",{enumerable:!0,get:function(){return r.useOutletContext}}),Object.defineProperty(e,"useParams",{enumerable:!0,get:function(){return r.useParams}}),Object.defineProperty(e,"useResolvedPath",{enumerable:!0,get:function(){return r.useResolvedPath}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return r.useRoutes}}),e.BrowserRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=n.createBrowserHistory({window:u,v5Compat:!0}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(r.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{path:n}=e;return e.exact||(n+="/*"),t.createElement(r.Routes,null,t.createElement(r.Route,{path:n,element:t.createElement(o.Route,e)}))},e.CompatRouter=function(e){let{children:n}=e,a=o.useHistory(),[u,i]=t.useState((()=>({location:a.location,action:a.action})));return t.useLayoutEffect((()=>{a.listen(((e,t)=>i({location:e,action:t})))}),[a]),t.createElement(r.Router,{navigationType:u.action,location:u.location,navigator:a},t.createElement(r.Routes,null,t.createElement(r.Route,{path:"*",element:n})))},e.HashRouter=function(e){let{basename:a,children:o,window:u}=e,i=t.useRef();null==i.current&&(i.current=n.createHashHistory({window:u,v5Compat:!0}));let c=i.current,[s,l]=t.useState({action:c.action,location:c.location});return t.useLayoutEffect((()=>c.listen(l)),[c]),t.createElement(r.Router,{basename:a,children:o,location:s.location,navigationType:s.action,navigator:c})},e.Link=f,e.NavLink=h,e.StaticRouter=function(e){let{basename:n,children:o,location:u="/"}=e;"string"==typeof u&&(u=a.parsePath(u));let i=a.Action.Pop,c={pathname:u.pathname||"/",search:u.search||"",hash:u.hash||"",state:u.state||null,key:u.key||"default"},s={createHref:e=>"string"==typeof e?e:a.createPath(e),push(e){throw new Error("You cannot use navigator.push() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+")` somewhere in your app.")},replace(e){throw new Error("You cannot use navigator.replace() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+JSON.stringify(e)+", { replace: true })` somewhere in your app.")},go(e){throw new Error("You cannot use navigator.go() on the server because it is a stateless environment. This error was probably triggered when you did a `navigate("+e+")` somewhere in your app.")},back(){throw new Error("You cannot use navigator.back() on the server because it is a stateless environment.")},forward(){throw new Error("You cannot use navigator.forward() on the server because it is a stateless environment.")}};return t.createElement(r.Router,{basename:n,children:o,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=c,e.unstable_HistoryRouter=function(e){let{basename:n,children:a,history:o}=e;const[u,i]=t.useState({action:o.action,location:o.location});return t.useLayoutEffect((()=>o.listen(i)),[o]),t.createElement(r.Router,{basename:n,children:a,location:u.location,navigationType:u.action,navigator:o})},e.useLinkClickHandler=p,e.useSearchParams=function(e){let n=t.useRef(c(e)),a=r.useLocation(),o=t.useMemo((()=>function(e,t){let r=c(e);for(let e of t.keys())r.has(e)||t.getAll(e).forEach((t=>{r.append(e,t)}));return r}(a.search,n.current)),[a.search]),u=r.useNavigate();return[o,t.useCallback(((e,t)=>{u("?"+c(e),t)}),[u])]},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-router-dom-v5-compat.production.min.js.map

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

251554

increased by64.83%

Number of package files

14

increased by7.69%

Lines of code

1834

increased by44.64%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

10

increased by100%

Dependency changes

• + Added@remix-run/router@0.1.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-router@6.4.0-pre.0(transitive)

• + Addeduse-sync-external-store@1.1.0(transitive)

• - Removedreact-router@6.3.0(transitive)

• Updatedreact-router@6.4.0-pre.0