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

Comparing version 6.4.0-pre.12 to 6.4.0-pre.13

CHANGELOG.md

 # react-router-dom-v5-compat
 
+## 6.4.0-pre.13
+
+### Patch Changes
+
+- Updated dependencies
+  - react-router-dom@6.4.0-pre.13
+  - react-router@6.4.0-pre.13
+
 ## 6.4.0-pre.12
@@ -4,0 +12,0 @@

dist/index.js

 /**
- * React Router DOM v5 Compat v6.4.0-pre.12
+ * React Router DOM v5 Compat v6.4.0-pre.13
  *
@@ -190,5 +190,5 @@ * Copyright (c) Remix Software Inc.
 
-const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
+const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
       _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
-      _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId"];
+      _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId", "relative"];
 /**
@@ -298,2 +298,3 @@ * A `<Router>` for use in web browsers. Provides the cleanest URLs.
     onClick,
+    relative,
     reloadDocument,
@@ -308,3 +309,5 @@ replace,
 
-  let href = useHref(to);
+  let href = useHref(to, {
+    relative
+  });
   let internalOnClick = useLinkClickHandler(to, {
@@ -314,3 +317,4 @@ replace,
     target,
-    resetScroll
+    resetScroll,
+    relative
   });
@@ -436,3 +440,4 @@
     fetcherKey,
-    routeId
+    routeId,
+    relative
   } = _ref8,
@@ -443,3 +448,5 @@ props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
   let formMethod = method.toLowerCase() === "get" ? "get" : "post";
-  let formAction = useFormAction(action);
+  let formAction = useFormAction(action, {
+    relative
+  });
 
@@ -453,3 +460,4 @@ let submitHandler = event => {
       method,
-      replace
+      replace,
+      relative
     });
@@ -487,11 +495,14 @@ };
     state,
-    resetScroll
+    resetScroll,
+    relative
   } = _temp === void 0 ? {} : _temp;
   let navigate = useNavigate();
   let location = useLocation();
-  let path = useResolvedPath(to);
+  let path = useResolvedPath(to, {
+    relative
+  });
   return React.useCallback(event => {
     if (shouldProcessLinkClick(event, target)) {
       event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
-      // a push, so do the same here unless the replace prop is explcitly set
+      // a push, so do the same here unless the replace prop is explicitly set
 
@@ -502,6 +513,7 @@ let replace = replaceProp !== undefined ? replaceProp : createPath(location) === createPath(path);
         state,
-        resetScroll
+        resetScroll,
+        relative
       });
     }
-  }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
+  }, [location, navigate, path, replaceProp, state, target, to, resetScroll, relative]);
 }
@@ -565,9 +577,36 @@ /**
 
-function useFormAction(action) {
+function useFormAction(action, _temp2) {
+  let {
+    relative
+  } = _temp2 === void 0 ? {} : _temp2;
   let routeContext = React.useContext(UNSAFE_RouteContext);
   !routeContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useFormAction must be used inside a RouteContext") : invariant(false) : void 0;
-  let location = useLocation();
   let [match] = routeContext.matches.slice(-1);
-  let path = useResolvedPath(action != null ? action : location);
+  let resolvedAction = action != null ? action : ".";
+  let path = useResolvedPath(resolvedAction, {
+    relative
+  }); // Previously we set the default action to ".". The problem with this is that
+  // `useResolvedPath(".")` excludes search params and the hash of the resolved
+  // URL. This is the intended behavior of when "." is specifically provided as
+  // the form action, but inconsistent w/ browsers when the action is omitted.
+  // https://github.com/remix-run/remix/issues/927
 
+  let location = useLocation();
+
+  if (action == null) {
+    // Safe to write to these directly here since if action was undefined, we
+    // would have called useResolvedPath(".") which will never include a search
+    // or hash
+    path.search = location.search;
+    path.hash = location.hash; // When grabbing search params from the URL, remove the automatically
+    // inserted ?index param so we match the useResolvedPath search behavior
+    // which would not include ?index
+
+    if (match.route.index) {
+      let params = new URLSearchParams(path.search);
+      params.delete("index");
+      path.search = params.toString() ? "?" + params.toString() : "";
+    }
+  }
+
   if ((!action || action === ".") && match.route.index) {
@@ -574,0 +613,0 @@ path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";

dist/main.js

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

dist/react-router-dom/dom.d.ts

 import type { FormEncType, FormMethod } from "@remix-run/router";
+import { RelativeRoutingType } from "react-router";
 export declare const defaultMethod = "get";
@@ -59,2 +60,8 @@ export declare function isHtmlElement(object: any): object is HTMLElement;
     replace?: boolean;
+    /**
+     * Determines whether the form action is relative to the route hierarchy or
+     * the pathname.  Use this if you want to opt out of navigating the route
+     * hierarchy and want to instead route based on /-delimited URL segments
+     */
+    relative?: RelativeRoutingType;
 }
@@ -61,0 +68,0 @@ export declare function getFormSubmissionInfo(target: HTMLFormElement | HTMLButtonElement | HTMLInputElement | FormData | URLSearchParams | {

dist/react-router-dom/index.d.ts

@@ -6,4 +6,4 @@ /**
 import * as React from "react";
-import { NavigateOptions, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, GetScrollRestorationKeyFunction, History, HydrationState, RouteObject } from "@remix-run/router";
+import type { NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
+import type { Fetcher, FormEncType, FormMethod, GetScrollRestorationKeyFunction, History, HydrationState } from "@remix-run/router";
 import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit } from "./dom";
@@ -13,6 +13,6 @@ import { createSearchParams } from "./dom";
 export { createSearchParams };
-export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataMemoryRouterProps, DataRouteMatch, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataMemoryRouterProps, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, } from "react-router";
 export { Await, DataMemoryRouter, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
-export { UNSAFE_DataRouter, UNSAFE_DataRouterProvider, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_DataStaticRouterContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, } from "react-router";
+export { UNSAFE_DataRouter, UNSAFE_DataRouterProvider, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_DataStaticRouterContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, } from "react-router";
 declare global {
@@ -84,2 +84,3 @@ var __staticRouterHydrationData: HydrationState | undefined;
     resetScroll?: boolean;
+    relative?: RelativeRoutingType;
     to: To;
@@ -132,2 +133,8 @@ }
     /**
+     * Determines whether the form action is relative to the route hierarchy or
+     * the pathname.  Use this if you want to opt out of navigating the route
+     * hierarchy and want to instead route based on /-delimited URL segments
+     */
+    relative?: RelativeRoutingType;
+    /**
      * A function to call when the form is submitted. If you call
@@ -162,3 +169,3 @@ * `event.preventDefault()` then this form will not do anything.
  */
-export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, resetScroll, }?: {
+export declare function useLinkClickHandler<E extends Element = HTMLAnchorElement>(to: To, { target, replace: replaceProp, state, resetScroll, relative, }?: {
     target?: React.HTMLAttributeAnchorTarget;
@@ -168,2 +175,3 @@ replace?: boolean;
     resetScroll?: boolean;
+    relative?: RelativeRoutingType;
 }): (event: React.MouseEvent<E, MouseEvent>) => void;
@@ -204,3 +212,5 @@ /**
 export declare function useSubmit(): SubmitFunction;
-export declare function useFormAction(action?: string): string;
+export declare function useFormAction(action?: string, { relative }?: {
+    relative?: RelativeRoutingType;
+}): string;
 declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
@@ -207,0 +217,0 @@ export declare type FetcherWithComponents<TData> = Fetcher<TData> & {

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

 /**
- * React Router DOM v5 Compat v6.4.0-pre.12
+ * React Router DOM v5 Compat v6.4.0-pre.13
  *
@@ -209,5 +209,5 @@ * Copyright (c) Remix Software Inc.
 
-  const _excluded = ["onClick", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
+  const _excluded = ["onClick", "relative", "reloadDocument", "replace", "state", "target", "to", "resetScroll"],
         _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "children"],
-        _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId"];
+        _excluded3 = ["reloadDocument", "replace", "method", "action", "onSubmit", "fetcherKey", "routeId", "relative"];
 
@@ -317,2 +317,3 @@ /**
       onClick,
+      relative,
       reloadDocument,
@@ -327,3 +328,5 @@ replace,
 
-    let href = reactRouter.useHref(to);
+    let href = reactRouter.useHref(to, {
+      relative
+    });
     let internalOnClick = useLinkClickHandler(to, {
@@ -333,3 +336,4 @@ replace,
       target,
-      resetScroll
+      resetScroll,
+      relative
     });
@@ -453,3 +457,4 @@
       fetcherKey,
-      routeId
+      routeId,
+      relative
     } = _ref8,
@@ -460,3 +465,5 @@ props = _objectWithoutPropertiesLoose(_ref8, _excluded3);
     let formMethod = method.toLowerCase() === "get" ? "get" : "post";
-    let formAction = useFormAction(action);
+    let formAction = useFormAction(action, {
+      relative
+    });
 
@@ -470,3 +477,4 @@ let submitHandler = event => {
         method,
-        replace
+        replace,
+        relative
       });
@@ -502,11 +510,14 @@ };
       state,
-      resetScroll
+      resetScroll,
+      relative
     } = _temp === void 0 ? {} : _temp;
     let navigate = reactRouter.useNavigate();
     let location = reactRouter.useLocation();
-    let path = reactRouter.useResolvedPath(to);
+    let path = reactRouter.useResolvedPath(to, {
+      relative
+    });
     return React__namespace.useCallback(event => {
       if (shouldProcessLinkClick(event, target)) {
         event.preventDefault(); // If the URL hasn't changed, a regular <a> will do a replace instead of
-        // a push, so do the same here unless the replace prop is explcitly set
+        // a push, so do the same here unless the replace prop is explicitly set
 
@@ -517,6 +528,7 @@ let replace = replaceProp !== undefined ? replaceProp : reactRouter.createPath(location) === reactRouter.createPath(path);
           state,
-          resetScroll
+          resetScroll,
+          relative
         });
       }
-    }, [location, navigate, path, replaceProp, state, target, to, resetScroll]);
+    }, [location, navigate, path, replaceProp, state, target, to, resetScroll, relative]);
   }
@@ -580,9 +592,36 @@ /**
 
-  function useFormAction(action) {
+  function useFormAction(action, _temp2) {
+    let {
+      relative
+    } = _temp2 === void 0 ? {} : _temp2;
     let routeContext = React__namespace.useContext(reactRouter.UNSAFE_RouteContext);
     !routeContext ? router.invariant(false, "useFormAction must be used inside a RouteContext")  : void 0;
-    let location = reactRouter.useLocation();
     let [match] = routeContext.matches.slice(-1);
-    let path = reactRouter.useResolvedPath(action != null ? action : location);
+    let resolvedAction = action != null ? action : ".";
+    let path = reactRouter.useResolvedPath(resolvedAction, {
+      relative
+    }); // Previously we set the default action to ".". The problem with this is that
+    // `useResolvedPath(".")` excludes search params and the hash of the resolved
+    // URL. This is the intended behavior of when "." is specifically provided as
+    // the form action, but inconsistent w/ browsers when the action is omitted.
+    // https://github.com/remix-run/remix/issues/927
 
+    let location = reactRouter.useLocation();
+
+    if (action == null) {
+      // Safe to write to these directly here since if action was undefined, we
+      // would have called useResolvedPath(".") which will never include a search
+      // or hash
+      path.search = location.search;
+      path.hash = location.hash; // When grabbing search params from the URL, remove the automatically
+      // inserted ?index param so we match the useResolvedPath search behavior
+      // which would not include ?index
+
+      if (match.route.index) {
+        let params = new URLSearchParams(path.search);
+        params.delete("index");
+        path.search = params.toString() ? "?" + params.toString() : "";
+      }
+    }
+
     if ((!action || action === ".") && match.route.index) {
@@ -589,0 +628,0 @@ path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";

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

 /**
- * React Router DOM v5 Compat v6.4.0-pre.12
+ * React Router DOM v5 Compat v6.4.0-pre.13
  *
@@ -11,3 +11,3 @@ * Copyright (c) Remix Software Inc.
  */
-!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="undefined"!=typeof globalThis?globalThis: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(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=u(t);function c(){return c=Object.assign?Object.assign.bind():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},c.apply(this,arguments)}function s(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 l(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 f=["onClick","reloadDocument","replace","state","target","to","resetScroll"],p=["aria-current","caseSensitive","className","end","style","to","children"];const d=i.forwardRef((function(e,t){let{onClick:n,reloadDocument:a,replace:o,state:u,target:l,to:p,resetScroll:d}=e,h=s(e,f),b=r.useHref(p),y=m(p,{replace:o,state:u,target:l,resetScroll:d});return i.createElement("a",c({},h,{href:b,onClick:a?n:function(e){n&&n(e),e.defaultPrevented||y(e)},ref:t,target:l}))})),h=i.forwardRef((function(e,t){let a,{"aria-current":o="page",caseSensitive:u=!1,className:l="",end:f=!1,style:h,to:m,children:b}=e,y=s(e,p),g=r.useResolvedPath(m),v=r.useMatch({path:g.pathname,end:f,caseSensitive:u}),P=i.useContext(r.UNSAFE_DataRouterStateContext),R=null==P?void 0:P.navigation.location,O=r.useResolvedPath(R||""),j=null!=i.useMemo((()=>R?n.matchPath({path:g.pathname,end:f,caseSensitive:u},O.pathname):null),[R,g.pathname,u,f,O.pathname]),w=null!=v,E=w?o:void 0;a="function"==typeof l?l({isActive:w,isPending:j}):[l,w?"active":null,j?"pending":null].filter(Boolean).join(" ");let S="function"==typeof h?h({isActive:w,isPending:j}):h;return i.createElement(d,c({},y,{"aria-current":E,className:a,ref:t,style:S,to:m}),"function"==typeof b?b({isActive:w,isPending:j}):b)}));function m(e,t){let{target:n,replace:a,state:o,resetScroll:u}=void 0===t?{}:t,c=r.useNavigate(),s=r.useLocation(),l=r.useResolvedPath(e);return i.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,n)){t.preventDefault();let n=void 0!==a?a:r.createPath(s)===r.createPath(l);c(e,{replace:n,state:o,resetScroll:u})}}),[s,c,l,a,o,n,e,u])}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:t,children:a,window:o}=e,u=i.useRef();null==u.current&&(u.current=n.createBrowserHistory({window:o,v5Compat:!0}));let c=u.current,[s,l]=i.useState({action:c.action,location:c.location});return i.useLayoutEffect((()=>c.listen(l)),[c]),i.createElement(r.Router,{basename:t,children:a,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{location:t,path:n}=e;return e.exact||(n+="/*"),i.createElement(r.Routes,{location:t},i.createElement(r.Route,{path:n,element:i.createElement(o.Route,e)}))},e.CompatRouter=function(e){let{children:t}=e,n=o.useHistory(),[a,u]=i.useState((()=>({location:n.location,action:n.action})));return i.useLayoutEffect((()=>{n.listen(((e,t)=>u({location:e,action:t})))}),[n]),i.createElement(r.Router,{navigationType:a.action,location:a.location,navigator:n},i.createElement(r.Routes,null,i.createElement(r.Route,{path:"*",element:t})))},e.HashRouter=function(e){let{basename:t,children:a,window:o}=e,u=i.useRef();null==u.current&&(u.current=n.createHashHistory({window:o,v5Compat:!0}));let c=u.current,[s,l]=i.useState({action:c.action,location:c.location});return i.useLayoutEffect((()=>c.listen(l)),[c]),i.createElement(r.Router,{basename:t,children:a,location:s.location,navigationType:s.action,navigator:c})},e.Link=d,e.NavLink=h,e.StaticRouter=function(e){let{basename:t,children:n,location:o="/"}=e;"string"==typeof o&&(o=a.parsePath(o));let u=a.Action.Pop,c={pathname:o.pathname||"/",search:o.search||"",hash:o.hash||"",state:o.state||null,key:o.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 i.createElement(r.Router,{basename:t,children:n,location:c,navigationType:u,navigator:s,static:!0})},e.createSearchParams=l,e.unstable_HistoryRouter=function(e){let{basename:t,children:n,history:a}=e;const[o,u]=i.useState({action:a.action,location:a.location});return i.useLayoutEffect((()=>a.listen(u)),[a]),i.createElement(r.Router,{basename:t,children:n,location:o.location,navigationType:o.action,navigator:a})},e.useLinkClickHandler=m,e.useSearchParams=function(e){let t=i.useRef(l(e)),n=r.useLocation(),a=i.useMemo((()=>function(e,t){let r=l(e);for(let e of t.keys())r.has(e)||t.getAll(e).forEach((t=>{r.append(e,t)}));return r}(n.search,t.current)),[n.search]),o=r.useNavigate(),u=i.useCallback(((e,t)=>{const r=l("function"==typeof e?e(a):e);o("?"+r,t)}),[o,a]);return[a,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="undefined"!=typeof globalThis?globalThis:e||self).ReactRouterDOMv5Compat={},e.React,e.ReactRouter,e.Router,e.HistoryLibrary,e.ReactRouterDOM)}(this,(function(e,t,r,n,a,o){"use strict";function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(t);function c(){return c=Object.assign?Object.assign.bind():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},c.apply(this,arguments)}function s(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 l(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 f=["onClick","relative","reloadDocument","replace","state","target","to","resetScroll"],p=["aria-current","caseSensitive","className","end","style","to","children"];const d=u.forwardRef((function(e,t){let{onClick:n,relative:a,reloadDocument:o,replace:i,state:l,target:p,to:d,resetScroll:h}=e,b=s(e,f),y=r.useHref(d,{relative:a}),g=m(d,{replace:i,state:l,target:p,resetScroll:h,relative:a});return u.createElement("a",c({},b,{href:y,onClick:o?n:function(e){n&&n(e),e.defaultPrevented||g(e)},ref:t,target:p}))})),h=u.forwardRef((function(e,t){let a,{"aria-current":o="page",caseSensitive:i=!1,className:l="",end:f=!1,style:h,to:m,children:b}=e,y=s(e,p),g=r.useResolvedPath(m),v=r.useMatch({path:g.pathname,end:f,caseSensitive:i}),P=u.useContext(r.UNSAFE_DataRouterStateContext),R=null==P?void 0:P.navigation.location,O=r.useResolvedPath(R||""),j=null!=u.useMemo((()=>R?n.matchPath({path:g.pathname,end:f,caseSensitive:i},O.pathname):null),[R,g.pathname,i,f,O.pathname]),w=null!=v,E=w?o:void 0;a="function"==typeof l?l({isActive:w,isPending:j}):[l,w?"active":null,j?"pending":null].filter(Boolean).join(" ");let S="function"==typeof h?h({isActive:w,isPending:j}):h;return u.createElement(d,c({},y,{"aria-current":E,className:a,ref:t,style:S,to:m}),"function"==typeof b?b({isActive:w,isPending:j}):b)}));function m(e,t){let{target:n,replace:a,state:o,resetScroll:i,relative:c}=void 0===t?{}:t,s=r.useNavigate(),l=r.useLocation(),f=r.useResolvedPath(e,{relative:c});return u.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,n)){t.preventDefault();let n=void 0!==a?a:r.createPath(l)===r.createPath(f);s(e,{replace:n,state:o,resetScroll:i,relative:c})}}),[l,s,f,a,o,n,e,i,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:t,children:a,window:o}=e,i=u.useRef();null==i.current&&(i.current=n.createBrowserHistory({window:o,v5Compat:!0}));let c=i.current,[s,l]=u.useState({action:c.action,location:c.location});return u.useLayoutEffect((()=>c.listen(l)),[c]),u.createElement(r.Router,{basename:t,children:a,location:s.location,navigationType:s.action,navigator:c})},e.CompatRoute=function(e){let{location:t,path:n}=e;return e.exact||(n+="/*"),u.createElement(r.Routes,{location:t},u.createElement(r.Route,{path:n,element:u.createElement(o.Route,e)}))},e.CompatRouter=function(e){let{children:t}=e,n=o.useHistory(),[a,i]=u.useState((()=>({location:n.location,action:n.action})));return u.useLayoutEffect((()=>{n.listen(((e,t)=>i({location:e,action:t})))}),[n]),u.createElement(r.Router,{navigationType:a.action,location:a.location,navigator:n},u.createElement(r.Routes,null,u.createElement(r.Route,{path:"*",element:t})))},e.HashRouter=function(e){let{basename:t,children:a,window:o}=e,i=u.useRef();null==i.current&&(i.current=n.createHashHistory({window:o,v5Compat:!0}));let c=i.current,[s,l]=u.useState({action:c.action,location:c.location});return u.useLayoutEffect((()=>c.listen(l)),[c]),u.createElement(r.Router,{basename:t,children:a,location:s.location,navigationType:s.action,navigator:c})},e.Link=d,e.NavLink=h,e.StaticRouter=function(e){let{basename:t,children:n,location:o="/"}=e;"string"==typeof o&&(o=a.parsePath(o));let i=a.Action.Pop,c={pathname:o.pathname||"/",search:o.search||"",hash:o.hash||"",state:o.state||null,key:o.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 u.createElement(r.Router,{basename:t,children:n,location:c,navigationType:i,navigator:s,static:!0})},e.createSearchParams=l,e.unstable_HistoryRouter=function(e){let{basename:t,children:n,history:a}=e;const[o,i]=u.useState({action:a.action,location:a.location});return u.useLayoutEffect((()=>a.listen(i)),[a]),u.createElement(r.Router,{basename:t,children:n,location:o.location,navigationType:o.action,navigator:a})},e.useLinkClickHandler=m,e.useSearchParams=function(e){let t=u.useRef(l(e)),n=r.useLocation(),a=u.useMemo((()=>function(e,t){let r=l(e);for(let e of t.keys())r.has(e)||t.getAll(e).forEach((t=>{r.append(e,t)}));return r}(n.search,t.current)),[n.search]),o=r.useNavigate(),i=u.useCallback(((e,t)=>{const r=l("function"==typeof e?e(a):e);o("?"+r,t)}),[o,a]);return[a,i]},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=react-router-dom-v5-compat.production.min.js.map

package.json

 {
   "name": "react-router-dom-v5-compat",
-  "version": "6.4.0-pre.12",
+  "version": "6.4.0-pre.13",
   "description": "Migration path to React Router v6 from v4/5",
@@ -27,3 +27,3 @@ "keywords": [
     "history": "^5.3.0",
-    "react-router": "6.4.0-pre.12"
+    "react-router": "6.4.0-pre.13"
   },
@@ -30,0 +30,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

281705

increased by4.65%

Lines of code

1880

increased by5.09%

Dependency changes

• + Added@remix-run/router@0.2.0-pre.8(transitive)

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

• - Removed@remix-run/router@0.2.0-pre.7(transitive)

• - Removedreact-router@6.4.0-pre.12(transitive)

• Updatedreact-router@6.4.0-pre.13