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

Comparing version 0.0.0-experimental-4a8a492a to 0.0.0-experimental-52e9b8eb3

CHANGELOG.md

 # `react-router-dom-v5-compat`
 
+## 6.23.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `@remix-run/router@1.16.1`
+  - `react-router-dom@6.23.1`
+  - `react-router@6.23.1`
+
+## 6.23.0
+
+### Minor Changes
+
+- Add a new `unstable_dataStrategy` configuration option ([#11098](https://github.com/remix-run/react-router/pull/11098))
+  - This option allows Data Router applications to take control over the approach for executing route loaders and actions
+  - The default implementation is today's behavior, to fetch all loaders in parallel, but this option allows users to implement more advanced data flows including Remix single-fetch, middleware/context APIs, automatic loader caching, and more
+
+### Patch Changes
+
+- Updated dependencies:
+  - `@remix-run/router@1.16.0`
+  - `react-router@6.23.0`
+  - `react-router-dom@6.23.0`
+
+## 6.22.3
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.22.3`
+  - `react-router-dom@6.22.3`
+
+## 6.22.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.22.2`
+  - `react-router-dom@6.22.2`
+
+## 6.22.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.22.1`
+  - `react-router-dom@6.22.1`
+
+## 6.22.0
+
+### Minor Changes
+
+- Include a `window__reactRouterVersion` tag for CWV Report detection ([#11222](https://github.com/remix-run/react-router/pull/11222))
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.22.0`
+  - `react-router@6.22.0`
+
+## 6.21.3
+
+### Patch Changes
+
+- Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction` types ([#11187](https://github.com/remix-run/react-router/pull/11187))
+- Updated dependencies:
+  - `react-router-dom@6.21.3`
+  - `react-router@6.21.3`
+
+## 6.21.2
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.21.2`
+  - `react-router@6.21.2`
+
+## 6.21.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router@6.21.1`
+  - `react-router-dom@6.21.1`
+
+## 6.21.0
+
+### Minor Changes
+
+- Add a new `future.v7_relativeSplatPath` flag to implement a breaking bug fix to relative routing when inside a splat route. ([#11087](https://github.com/remix-run/react-router/pull/11087))
+
+  This fix was originally added in [#10983](https://github.com/remix-run/react-router/issues/10983) and was later reverted in [#11078](https://github.com/remix-run/react-router/pull/11078) because it was determined that a large number of existing applications were relying on the buggy behavior (see [#11052](https://github.com/remix-run/react-router/issues/11052))
+
+  **The Bug**
+  The buggy behavior is that without this flag, the default behavior when resolving relative paths is to _ignore_ any splat (`*`) portion of the current route path.
+
+  **The Background**
+  This decision was originally made thinking that it would make the concept of nested different sections of your apps in `<Routes>` easier if relative routing would _replace_ the current splat:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="dashboard/*" element={<Dashboard />} />
+    </Routes>
+  </BrowserRouter>
+  ```
+
+  Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects` will match the `Dashboard` route. The dashboard component itself can then render nested `<Routes>`:
+
+  ```jsx
+  function Dashboard() {
+    return (
+      <div>
+        <h2>Dashboard</h2>
+        <nav>
+          <Link to="/">Dashboard Home</Link>
+          <Link to="team">Team</Link>
+          <Link to="projects">Projects</Link>
+        </nav>
+
+        <Routes>
+          <Route path="/" element={<DashboardHome />} />
+          <Route path="team" element={<DashboardTeam />} />
+          <Route path="projects" element={<DashboardProjects />} />
+        </Routes>
+      </div>
+    );
+  }
+  ```
+
+  Now, all links and route paths are relative to the router above them. This makes code splitting and compartmentalizing your app really easy. You could render the `Dashboard` as its own independent app, or embed it into your large app without making any changes to it.
+
+  **The Problem**
+
+  The problem is that this concept of ignoring part of a path breaks a lot of other assumptions in React Router - namely that `"."` always means the current location pathname for that route. When we ignore the splat portion, we start getting invalid paths when using `"."`:
+
+  ```jsx
+  // If we are on URL /dashboard/team, and we want to link to /dashboard/team:
+  function DashboardTeam() {
+    // ❌ This is broken and results in <a href="/dashboard">
+    return <Link to=".">A broken link to the Current URL</Link>;
+
+    // ✅ This is fixed but super unintuitive since we're already at /dashboard/team!
+    return <Link to="./team">A broken link to the Current URL</Link>;
+  }
+  ```
+
+  We've also introduced an issue that we can no longer move our `DashboardTeam` component around our route hierarchy easily - since it behaves differently if we're underneath a non-splat route, such as `/dashboard/:widget`. Now, our `"."` links will, properly point to ourself _inclusive of the dynamic param value_ so behavior will break from it's corresponding usage in a `/dashboard/*` route.
+
+  Even worse, consider a nested splat route configuration:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>
+      <Route path="dashboard">
+        <Route path="*" element={<Dashboard />} />
+      </Route>
+    </Routes>
+  </BrowserRouter>
+  ```
+
+  Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard` component go to the same place! That is definitely not correct!
+
+  Another common issue arose in Data Routers (and Remix) where any `<Form>` should post to it's own route `action` if you the user doesn't specify a form action:
+
+  ```jsx
+  let router = createBrowserRouter({
+    path: "/dashboard",
+    children: [
+      {
+        path: "*",
+        action: dashboardAction,
+        Component() {
+          // ❌ This form is broken!  It throws a 405 error when it submits because
+          // it tries to submit to /dashboard (without the splat value) and the parent
+          // `/dashboard` route doesn't have an action
+          return <Form method="post">...</Form>;
+        },
+      },
+    ],
+  });
+  ```
+
+  This is just a compounded issue from the above because the default location for a `Form` to submit to is itself (`"."`) - and if we ignore the splat portion, that now resolves to the parent route.
+
+  **The Solution**
+  If you are leveraging this behavior, it's recommended to enable the future flag, move your splat to it's own route, and leverage `../` for any links to "sibling" pages:
+
+  ```jsx
+  <BrowserRouter>
+    <Routes>
+      <Route path="dashboard">
+        <Route index path="*" element={<Dashboard />} />
+      </Route>
+    </Routes>
+  </BrowserRouter>
+
+  function Dashboard() {
+    return (
+      <div>
+        <h2>Dashboard</h2>
+        <nav>
+          <Link to="..">Dashboard Home</Link>
+          <Link to="../team">Team</Link>
+          <Link to="../projects">Projects</Link>
+        </nav>
+
+        <Routes>
+          <Route path="/" element={<DashboardHome />} />
+          <Route path="team" element={<DashboardTeam />} />
+          <Route path="projects" element={<DashboardProjects />} />
+        </Router>
+      </div>
+    );
+  }
+  ```
+
+  This way, `.` means "the full current pathname for my route" in all cases (including static, dynamic, and splat routes) and `..` always means "my parents pathname".
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.21.0`
+  - `react-router@6.21.0`
+
+## 6.20.1
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.20.1`
+  - `react-router@6.20.1`
+
+## 6.20.0
+
+### Minor Changes
+
+- Export the `PathParam` type from the public API ([#10719](https://github.com/remix-run/react-router/pull/10719))
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.20.0`
+  - `react-router@6.20.0`
+
+## 6.19.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.19.0`
+  - `react-router@6.19.0`
+
+## 6.18.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.18.0`
+  - `react-router@6.18.0`
+
+## 6.17.0
+
+### Patch Changes
+
+- Updated dependencies:
+  - `react-router-dom@6.17.0`
+  - `react-router@6.17.0`
+
 ## 6.16.0
@@ -4,0 +274,0 @@

dist/index.d.ts

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

dist/index.js

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-4a8a492a
+ * React Router DOM v5 Compat v0.0.0-experimental-52e9b8eb3
  *
@@ -12,5 +12,6 @@ * Copyright (c) Remix Software Inc.
 import * as React from 'react';
-import { UNSAFE_mapRouteProperties, Router, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, UNSAFE_DataRouterStateContext, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, unstable_useBlocker, UNSAFE_ViewTransitionContext, UNSAFE_DataRouterContext, Routes, Route } from 'react-router';
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
-import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, matchPath } from '@remix-run/router';
+import * as ReactDOM from 'react-dom';
+import { UNSAFE_mapRouteProperties, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, Router, UNSAFE_useRoutesImpl, UNSAFE_NavigationContext, useHref, useResolvedPath, useLocation, useNavigate, createPath, UNSAFE_useRouteId, UNSAFE_RouteContext, useMatches, useNavigation, useBlocker, Routes, Route } from 'react-router';
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes } from 'react-router';
+import { stripBasename, UNSAFE_warning, createRouter, createBrowserHistory, createHashHistory, UNSAFE_ErrorResponseImpl, UNSAFE_invariant, joinPaths, IDLE_FETCHER, matchPath } from '@remix-run/router';
 import { parsePath, Action, createPath as createPath$1 } from 'history';
@@ -214,3 +215,18 @@ import { Route as Route$1, useHistory } from 'react-router-dom';
   _excluded2 = ["aria-current", "caseSensitive", "className", "end", "style", "to", "unstable_viewTransition", "children"],
-  _excluded3 = ["reloadDocument", "replace", "state", "method", "action", "onSubmit", "submit", "relative", "preventScrollReset", "unstable_viewTransition"];
+  _excluded3 = ["fetcherKey", "navigate", "reloadDocument", "replace", "state", "method", "action", "onSubmit", "relative", "preventScrollReset", "unstable_viewTransition"];
+// HEY YOU! DON'T TOUCH THIS VARIABLE!
+//
+// It is replaced with the proper version at build time via a babel plugin in
+// the rollup config.
+//
+// Export a global property onto the window for React Router detection by the
+// Core Web Vitals Technology Report.  This way they can configure the `wappalyzer`
+// to detect and properly classify live websites as being built with React Router:
+// https://github.com/HTTPArchive/wappalyzer/blob/main/src/technologies/r.json
+const REACT_ROUTER_VERSION = "0";
+try {
+  window.__reactRouterVersion = REACT_ROUTER_VERSION;
+} catch (e) {
+  // no-op
+}
 function createBrowserRouter(routes, opts) {
@@ -227,3 +243,5 @@ return createRouter({
     routes,
-    mapRouteProperties: UNSAFE_mapRouteProperties
+    mapRouteProperties: UNSAFE_mapRouteProperties,
+    unstable_dataStrategy: opts == null ? void 0 : opts.unstable_dataStrategy,
+    window: opts == null ? void 0 : opts.window
   }).initialize();
@@ -242,3 +260,5 @@ }
     routes,
-    mapRouteProperties: UNSAFE_mapRouteProperties
+    mapRouteProperties: UNSAFE_mapRouteProperties,
+    unstable_dataStrategy: opts == null ? void 0 : opts.unstable_dataStrategy,
+    window: opts == null ? void 0 : opts.window
   }).initialize();
@@ -295,2 +315,12 @@ }
 }
+const ViewTransitionContext = /*#__PURE__*/React.createContext({
+  isTransitioning: false
+});
+if (process.env.NODE_ENV !== "production") {
+  ViewTransitionContext.displayName = "ViewTransition";
+}
+const FetchersContext = /*#__PURE__*/React.createContext(new Map());
+if (process.env.NODE_ENV !== "production") {
+  FetchersContext.displayName = "Fetchers";
+}
 //#endregion
@@ -323,6 +353,267 @@ ////////////////////////////////////////////////////////////////////////////////
 const startTransitionImpl = React[START_TRANSITION];
+const FLUSH_SYNC = "flushSync";
+const flushSyncImpl = ReactDOM[FLUSH_SYNC];
+const USE_ID = "useId";
+const useIdImpl = React[USE_ID];
+function startTransitionSafe(cb) {
+  if (startTransitionImpl) {
+    startTransitionImpl(cb);
+  } else {
+    cb();
+  }
+}
+function flushSyncSafe(cb) {
+  if (flushSyncImpl) {
+    flushSyncImpl(cb);
+  } else {
+    cb();
+  }
+}
+class Deferred {
+  constructor() {
+    this.status = "pending";
+    this.promise = new Promise((resolve, reject) => {
+      this.resolve = value => {
+        if (this.status === "pending") {
+          this.status = "resolved";
+          resolve(value);
+        }
+      };
+      this.reject = reason => {
+        if (this.status === "pending") {
+          this.status = "rejected";
+          reject(reason);
+        }
+      };
+    });
+  }
+}
 /**
+ * Given a Remix Router instance, render the appropriate UI
+ */
+function RouterProvider(_ref) {
+  let {
+    fallbackElement,
+    router,
+    future
+  } = _ref;
+  let [state, setStateImpl] = React.useState(router.state);
+  let [pendingState, setPendingState] = React.useState();
+  let [vtContext, setVtContext] = React.useState({
+    isTransitioning: false
+  });
+  let [renderDfd, setRenderDfd] = React.useState();
+  let [transition, setTransition] = React.useState();
+  let [interruption, setInterruption] = React.useState();
+  let fetcherData = React.useRef(new Map());
+  let {
+    v7_startTransition
+  } = future || {};
+  let optInStartTransition = React.useCallback(cb => {
+    if (v7_startTransition) {
+      startTransitionSafe(cb);
+    } else {
+      cb();
+    }
+  }, [v7_startTransition]);
+  let setState = React.useCallback((newState, _ref2) => {
+    let {
+      deletedFetchers,
+      unstable_flushSync: flushSync,
+      unstable_viewTransitionOpts: viewTransitionOpts
+    } = _ref2;
+    deletedFetchers.forEach(key => fetcherData.current.delete(key));
+    newState.fetchers.forEach((fetcher, key) => {
+      if (fetcher.data !== undefined) {
+        fetcherData.current.set(key, fetcher.data);
+      }
+    });
+    let isViewTransitionUnavailable = router.window == null || router.window.document == null || typeof router.window.document.startViewTransition !== "function";
+    // If this isn't a view transition or it's not available in this browser,
+    // just update and be done with it
+    if (!viewTransitionOpts || isViewTransitionUnavailable) {
+      if (flushSync) {
+        flushSyncSafe(() => setStateImpl(newState));
+      } else {
+        optInStartTransition(() => setStateImpl(newState));
+      }
+      return;
+    }
+    // flushSync + startViewTransition
+    if (flushSync) {
+      // Flush through the context to mark DOM elements as transition=ing
+      flushSyncSafe(() => {
+        // Cancel any pending transitions
+        if (transition) {
+          renderDfd && renderDfd.resolve();
+          transition.skipTransition();
+        }
+        setVtContext({
+          isTransitioning: true,
+          flushSync: true,
+          currentLocation: viewTransitionOpts.currentLocation,
+          nextLocation: viewTransitionOpts.nextLocation
+        });
+      });
+      // Update the DOM
+      let t = router.window.document.startViewTransition(() => {
+        flushSyncSafe(() => setStateImpl(newState));
+      });
+      // Clean up after the animation completes
+      t.finished.finally(() => {
+        flushSyncSafe(() => {
+          setRenderDfd(undefined);
+          setTransition(undefined);
+          setPendingState(undefined);
+          setVtContext({
+            isTransitioning: false
+          });
+        });
+      });
+      flushSyncSafe(() => setTransition(t));
+      return;
+    }
+    // startTransition + startViewTransition
+    if (transition) {
+      // Interrupting an in-progress transition, cancel and let everything flush
+      // out, and then kick off a new transition from the interruption state
+      renderDfd && renderDfd.resolve();
+      transition.skipTransition();
+      setInterruption({
+        state: newState,
+        currentLocation: viewTransitionOpts.currentLocation,
+        nextLocation: viewTransitionOpts.nextLocation
+      });
+    } else {
+      // Completed navigation update with opted-in view transitions, let 'er rip
+      setPendingState(newState);
+      setVtContext({
+        isTransitioning: true,
+        flushSync: false,
+        currentLocation: viewTransitionOpts.currentLocation,
+        nextLocation: viewTransitionOpts.nextLocation
+      });
+    }
+  }, [router.window, transition, renderDfd, fetcherData, optInStartTransition]);
+  // Need to use a layout effect here so we are subscribed early enough to
+  // pick up on any render-driven redirects/navigations (useEffect/<Navigate>)
+  React.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
+  // When we start a view transition, create a Deferred we can use for the
+  // eventual "completed" render
+  React.useEffect(() => {
+    if (vtContext.isTransitioning && !vtContext.flushSync) {
+      setRenderDfd(new Deferred());
+    }
+  }, [vtContext]);
+  // Once the deferred is created, kick off startViewTransition() to update the
+  // DOM and then wait on the Deferred to resolve (indicating the DOM update has
+  // happened)
+  React.useEffect(() => {
+    if (renderDfd && pendingState && router.window) {
+      let newState = pendingState;
+      let renderPromise = renderDfd.promise;
+      let transition = router.window.document.startViewTransition(async () => {
+        optInStartTransition(() => setStateImpl(newState));
+        await renderPromise;
+      });
+      transition.finished.finally(() => {
+        setRenderDfd(undefined);
+        setTransition(undefined);
+        setPendingState(undefined);
+        setVtContext({
+          isTransitioning: false
+        });
+      });
+      setTransition(transition);
+    }
+  }, [optInStartTransition, pendingState, renderDfd, router.window]);
+  // When the new location finally renders and is committed to the DOM, this
+  // effect will run to resolve the transition
+  React.useEffect(() => {
+    if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
+      renderDfd.resolve();
+    }
+  }, [renderDfd, transition, state.location, pendingState]);
+  // If we get interrupted with a new navigation during a transition, we skip
+  // the active transition, let it cleanup, then kick it off again here
+  React.useEffect(() => {
+    if (!vtContext.isTransitioning && interruption) {
+      setPendingState(interruption.state);
+      setVtContext({
+        isTransitioning: true,
+        flushSync: false,
+        currentLocation: interruption.currentLocation,
+        nextLocation: interruption.nextLocation
+      });
+      setInterruption(undefined);
+    }
+  }, [vtContext.isTransitioning, interruption]);
+  React.useEffect(() => {
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using " + "`v7_partialHydration`, use a `HydrateFallback` component instead") : void 0;
+    // Only log this once on initial mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let navigator = React.useMemo(() => {
+    return {
+      createHref: router.createHref,
+      encodeLocation: router.encodeLocation,
+      go: n => router.navigate(n),
+      push: (to, state, opts) => router.navigate(to, {
+        state,
+        preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
+      }),
+      replace: (to, state, opts) => router.navigate(to, {
+        replace: true,
+        state,
+        preventScrollReset: opts == null ? void 0 : opts.preventScrollReset
+      })
+    };
+  }, [router]);
+  let basename = router.basename || "/";
+  let dataRouterContext = React.useMemo(() => ({
+    router,
+    navigator,
+    static: false,
+    basename
+  }), [router, navigator, basename]);
+  // The fragment and {null} here are important!  We need them to keep React 18's
+  // useId happy when we are server-rendering since we may have a <script> here
+  // containing the hydrated server-side staticContext (from StaticRouterProvider).
+  // useId relies on the component tree structure to generate deterministic id's
+  // so we need to ensure it remains the same on the client even though
+  // we don't need the <script> tag
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UNSAFE_DataRouterContext.Provider, {
+    value: dataRouterContext
+  }, /*#__PURE__*/React.createElement(UNSAFE_DataRouterStateContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement(FetchersContext.Provider, {
+    value: fetcherData.current
+  }, /*#__PURE__*/React.createElement(ViewTransitionContext.Provider, {
+    value: vtContext
+  }, /*#__PURE__*/React.createElement(Router, {
+    basename: basename,
+    location: state.location,
+    navigationType: state.historyAction,
+    navigator: navigator,
+    future: {
+      v7_relativeSplatPath: router.future.v7_relativeSplatPath
+    }
+  }, state.initialized || router.future.v7_partialHydration ? /*#__PURE__*/React.createElement(DataRoutes, {
+    routes: router.routes,
+    future: router.future,
+    state: state
+  }) : fallbackElement))))), null);
+}
+function DataRoutes(_ref3) {
+  let {
+    routes,
+    future,
+    state
+  } = _ref3;
+  return UNSAFE_useRoutesImpl(routes, undefined, state, future);
+}
+/**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
  */
-function BrowserRouter(_ref) {
+function BrowserRouter(_ref4) {
   let {
@@ -333,3 +624,3 @@ basename,
     window
-  } = _ref;
+  } = _ref4;
   let historyRef = React.useRef();
@@ -359,3 +650,4 @@ if (historyRef.current == null) {
     navigationType: state.action,
-    navigator: history
+    navigator: history,
+    future: future
   });
@@ -367,3 +659,3 @@ }
  */
-function HashRouter(_ref2) {
+function HashRouter(_ref5) {
   let {
@@ -374,3 +666,3 @@ basename,
     window
-  } = _ref2;
+  } = _ref5;
   let historyRef = React.useRef();
@@ -400,3 +692,4 @@ if (historyRef.current == null) {
     navigationType: state.action,
-    navigator: history
+    navigator: history,
+    future: future
   });
@@ -410,3 +703,3 @@ }
  */
-function HistoryRouter(_ref3) {
+function HistoryRouter(_ref6) {
   let {
@@ -417,3 +710,3 @@ basename,
     history
-  } = _ref3;
+  } = _ref6;
   let [state, setStateImpl] = React.useState({
@@ -435,3 +728,4 @@ action: history.action,
     navigationType: state.action,
-    navigator: history
+    navigator: history,
+    future: future
   });
@@ -447,3 +741,3 @@ }
  */
-const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref4, ref) {
+const Link = /*#__PURE__*/React.forwardRef(function LinkWithRef(_ref7, ref) {
   let {
@@ -459,4 +753,4 @@ onClick,
       unstable_viewTransition
-    } = _ref4,
-    rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
+    } = _ref7,
+    rest = _objectWithoutPropertiesLoose(_ref7, _excluded);
   let {
@@ -524,3 +818,3 @@ basename
  */
-const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref5, ref) {
+const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref) {
   let {
@@ -535,4 +829,4 @@ "aria-current": ariaCurrentProp = "page",
       children
-    } = _ref5,
-    rest = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+    } = _ref8,
+    rest = _objectWithoutPropertiesLoose(_ref8, _excluded2);
   let path = useResolvedPath(to, {
@@ -544,5 +838,9 @@ relative: rest.relative
   let {
-    navigator
+    navigator,
+    basename
   } = React.useContext(UNSAFE_NavigationContext);
-  let isTransitioning = useViewTransitionState(path) && unstable_viewTransition === true;
+  let isTransitioning = routerState != null &&
+  // Conditional usage is OK here because the usage of a data router is static
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useViewTransitionState(path) && unstable_viewTransition === true;
   let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
@@ -556,3 +854,12 @@ let locationPathname = location.pathname;
   }
-  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(toPathname.length) === "/";
+  if (nextLocationPathname && basename) {
+    nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
+  }
+  // If the `to` has a trailing slash, look at that exact spot.  Otherwise,
+  // we're looking for a slash _after_ what's in `to`.  For example:
+  //
+  // <NavLink to="/users"> and <NavLink to="/users/">
+  // both want to look for a / at index 6 to match URL `/users/matt`
+  const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
+  let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
   let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
@@ -595,14 +902,6 @@ let renderProps = {
  */
-const Form = /*#__PURE__*/React.forwardRef((props, ref) => {
-  let submit = useSubmit();
-  return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
-    submit: submit,
-    ref: ref
-  }));
-});
-if (process.env.NODE_ENV !== "production") {
-  Form.displayName = "Form";
-}
-const FormImpl = /*#__PURE__*/React.forwardRef((_ref6, forwardedRef) => {
+const Form = /*#__PURE__*/React.forwardRef((_ref9, forwardedRef) => {
   let {
+      fetcherKey,
+      navigate,
       reloadDocument,
@@ -614,12 +913,12 @@ replace,
       onSubmit,
-      submit,
       relative,
       preventScrollReset,
       unstable_viewTransition
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3);
-  let formMethod = method.toLowerCase() === "get" ? "get" : "post";
+    } = _ref9,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded3);
+  let submit = useSubmit();
   let formAction = useFormAction(action, {
     relative
   });
+  let formMethod = method.toLowerCase() === "get" ? "get" : "post";
   let submitHandler = event => {
@@ -632,3 +931,5 @@ onSubmit && onSubmit(event);
     submit(submitter || event.currentTarget, {
+      fetcherKey,
       method: submitMethod,
+      navigate,
       replace,
@@ -649,3 +950,3 @@ state,
 if (process.env.NODE_ENV !== "production") {
-  FormImpl.displayName = "FormImpl";
+  Form.displayName = "Form";
 }
@@ -656,7 +957,7 @@ /**
  */
-function ScrollRestoration(_ref7) {
+function ScrollRestoration(_ref10) {
   let {
     getKey,
     storageKey
-  } = _ref7;
+  } = _ref10;
   useScrollRestoration({
@@ -681,3 +982,2 @@ getKey,
   DataRouterHook["UseFetcher"] = "useFetcher";
-  DataRouterHook["useViewTransitionStates"] = "useViewTransitionStates";
   DataRouterHook["useViewTransitionState"] = "useViewTransitionState";
@@ -687,5 +987,7 @@ })(DataRouterHook || (DataRouterHook = {}));
 (function (DataRouterStateHook) {
+  DataRouterStateHook["UseFetcher"] = "useFetcher";
   DataRouterStateHook["UseFetchers"] = "useFetchers";
   DataRouterStateHook["UseScrollRestoration"] = "useScrollRestoration";
 })(DataRouterStateHook || (DataRouterStateHook = {}));
+// Internal hooks
 function getDataRouterConsoleError(hookName) {
@@ -704,2 +1006,3 @@ return hookName + " must be used within a data router.  See https://reactrouter.com/routers/picking-a-router.";
 }
+// External hooks
 /**
@@ -767,2 +1070,4 @@ * Handles the click behavior for router `<Link>` components. This is useful if
 }
+let fetcherId = 0;
+let getUniqueFetcherId = () => "__" + String(++fetcherId) + "__";
 /**
@@ -792,47 +1097,28 @@ * Returns a function that may be used to programmatically submit a form (or
     } = getFormSubmissionInfo(target, basename);
-    router.navigate(options.action || action, {
-      preventScrollReset: options.preventScrollReset,
-      formData,
-      body,
-      formMethod: options.method || method,
-      formEncType: options.encType || encType,
-      replace: options.replace,
-      state: options.state,
-      fromRouteId: currentRouteId,
-      unstable_viewTransition: options.unstable_viewTransition
-    });
+    if (options.navigate === false) {
+      let key = options.fetcherKey || getUniqueFetcherId();
+      router.fetch(key, currentRouteId, options.action || action, {
+        preventScrollReset: options.preventScrollReset,
+        formData,
+        body,
+        formMethod: options.method || method,
+        formEncType: options.encType || encType,
+        unstable_flushSync: options.unstable_flushSync
+      });
+    } else {
+      router.navigate(options.action || action, {
+        preventScrollReset: options.preventScrollReset,
+        formData,
+        body,
+        formMethod: options.method || method,
+        formEncType: options.encType || encType,
+        replace: options.replace,
+        state: options.state,
+        fromRouteId: currentRouteId,
+        unstable_flushSync: options.unstable_flushSync,
+        unstable_viewTransition: options.unstable_viewTransition
+      });
+    }
   }, [router, basename, currentRouteId]);
 }
-/**
- * Returns the implementation for fetcher.submit
- */
-function useSubmitFetcher(fetcherKey, fetcherRouteId) {
-  let {
-    router
-  } = useDataRouterContext(DataRouterHook.UseSubmitFetcher);
-  let {
-    basename
-  } = React.useContext(UNSAFE_NavigationContext);
-  return React.useCallback(function (target, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    validateClientSideSubmission();
-    let {
-      action,
-      method,
-      encType,
-      formData,
-      body
-    } = getFormSubmissionInfo(target, basename);
-    !(fetcherRouteId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for useFetcher()") : UNSAFE_invariant(false) : void 0;
-    router.fetch(fetcherKey, fetcherRouteId, options.action || action, {
-      preventScrollReset: options.preventScrollReset,
-      formData,
-      body,
-      formMethod: options.method || method,
-      formEncType: options.encType || encType
-    });
-  }, [router, basename, fetcherKey, fetcherRouteId]);
-}
 // v7: Eventually we should deprecate this entirely in favor of using the
@@ -855,6 +1141,4 @@ // router method directly?
   }));
-  // Previously we set the default action to ".". The problem with this is that
-  // `useResolvedPath(".")` excludes search params 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.
+  // If no action was specified, browsers will persist current search params
+  // when determining the path, so match that behavior
   // https://github.com/remix-run/remix/issues/927
@@ -866,7 +1150,7 @@ let location = useLocation();
     path.search = location.search;
-    // 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);
+    // When grabbing search params from the URL, remove any included ?index param
+    // since it might not apply to our contextual route.  We add it back based
+    // on match.route.index below
+    let params = new URLSearchParams(path.search);
+    if (params.has("index") && params.get("index") === "") {
       params.delete("index");
@@ -888,16 +1172,2 @@ path.search = params.toString() ? "?" + params.toString() : "";
 }
-function createFetcherForm(fetcherKey, routeId) {
-  let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
-    let submit = useSubmitFetcher(fetcherKey, routeId);
-    return /*#__PURE__*/React.createElement(FormImpl, _extends({}, props, {
-      ref: ref,
-      submit: submit
-    }));
-  });
-  if (process.env.NODE_ENV !== "production") {
-    FetcherForm.displayName = "fetcher.Form";
-  }
-  return FetcherForm;
-}
-let fetcherId = 0;
 // TODO: (v7) Change the useFetcher generic default from `any` to `unknown`
@@ -908,40 +1178,73 @@ /**
  */
-function useFetcher() {
+function useFetcher(_temp3) {
   var _route$matches;
   let {
+    key
+  } = _temp3 === void 0 ? {} : _temp3;
+  let {
     router
   } = useDataRouterContext(DataRouterHook.UseFetcher);
+  let state = useDataRouterState(DataRouterStateHook.UseFetcher);
+  let fetcherData = React.useContext(FetchersContext);
   let route = React.useContext(UNSAFE_RouteContext);
+  let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
+  !fetcherData ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a FetchersContext") : UNSAFE_invariant(false) : void 0;
   !route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
-  let routeId = (_route$matches = route.matches[route.matches.length - 1]) == null ? void 0 : _route$matches.route.id;
   !(routeId != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher can only be used on routes that contain a unique \"id\"") : UNSAFE_invariant(false) : void 0;
-  let [fetcherKey] = React.useState(() => String(++fetcherId));
-  let [Form] = React.useState(() => {
-    !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.Form()") : UNSAFE_invariant(false) : void 0;
-    return createFetcherForm(fetcherKey, routeId);
-  });
-  let [load] = React.useState(() => href => {
-    !router ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No router available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-    !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
-    router.fetch(fetcherKey, routeId, href);
-  });
-  let submit = useSubmitFetcher(fetcherKey, routeId);
-  let fetcher = router.getFetcher(fetcherKey);
-  let fetcherWithComponents = React.useMemo(() => _extends({
-    Form,
-    submit,
-    load
-  }, fetcher), [fetcher, Form, submit, load]);
+  // Fetcher key handling
+  // OK to call conditionally to feature detect `useId`
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  let defaultKey = useIdImpl ? useIdImpl() : "";
+  let [fetcherKey, setFetcherKey] = React.useState(key || defaultKey);
+  if (key && key !== fetcherKey) {
+    setFetcherKey(key);
+  } else if (!fetcherKey) {
+    // We will only fall through here when `useId` is not available
+    setFetcherKey(getUniqueFetcherId());
+  }
+  // Registration/cleanup
   React.useEffect(() => {
-    // Is this busted when the React team gets real weird and calls effects
-    // twice on mount?  We really just need to garbage collect here when this
-    // fetcher is no longer around.
+    router.getFetcher(fetcherKey);
     return () => {
-      if (!router) {
-        console.warn("No router available to clean up from useFetcher()");
-        return;
-      }
+      // Tell the router we've unmounted - if v7_fetcherPersist is enabled this
+      // will not delete immediately but instead queue up a delete after the
+      // fetcher returns to an `idle` state
       router.deleteFetcher(fetcherKey);
     };
   }, [router, fetcherKey]);
+  // Fetcher additions
+  let load = React.useCallback((href, opts) => {
+    !routeId ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "No routeId available for fetcher.load()") : UNSAFE_invariant(false) : void 0;
+    router.fetch(fetcherKey, routeId, href, opts);
+  }, [fetcherKey, routeId, router]);
+  let submitImpl = useSubmit();
+  let submit = React.useCallback((target, opts) => {
+    submitImpl(target, _extends({}, opts, {
+      navigate: false,
+      fetcherKey
+    }));
+  }, [fetcherKey, submitImpl]);
+  let FetcherForm = React.useMemo(() => {
+    let FetcherForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+      return /*#__PURE__*/React.createElement(Form, _extends({}, props, {
+        navigate: false,
+        fetcherKey: fetcherKey,
+        ref: ref
+      }));
+    });
+    if (process.env.NODE_ENV !== "production") {
+      FetcherForm.displayName = "fetcher.Form";
+    }
+    return FetcherForm;
+  }, [fetcherKey]);
+  // Exposed FetcherWithComponents
+  let fetcher = state.fetchers.get(fetcherKey) || IDLE_FETCHER;
+  let data = fetcherData.get(fetcherKey);
+  let fetcherWithComponents = React.useMemo(() => _extends({
+    Form: FetcherForm,
+    submit,
+    load
+  }, fetcher, {
+    data
+  }), [FetcherForm, submit, load, fetcher, data]);
   return fetcherWithComponents;
@@ -955,3 +1258,8 @@ }
   let state = useDataRouterState(DataRouterStateHook.UseFetchers);
-  return [...state.fetchers.values()];
+  return Array.from(state.fetchers.entries()).map(_ref11 => {
+    let [key, fetcher] = _ref11;
+    return _extends({}, fetcher, {
+      key
+    });
+  });
 }
@@ -963,7 +1271,7 @@ const SCROLL_RESTORATION_STORAGE_KEY = "react-router-scroll-positions";
  */
-function useScrollRestoration(_temp3) {
+function useScrollRestoration(_temp4) {
   let {
     getKey,
     storageKey
-  } = _temp3 === void 0 ? {} : _temp3;
+  } = _temp4 === void 0 ? {} : _temp4;
   let {
@@ -1106,8 +1414,8 @@ router
  */
-function usePrompt(_ref8) {
+function usePrompt(_ref12) {
   let {
     when,
     message
-  } = _ref8;
-  let blocker = unstable_useBlocker(when);
+  } = _ref12;
+  let blocker = useBlocker(when);
   React.useEffect(() => {
@@ -1144,3 +1452,4 @@ if (blocker.state === "blocked") {
   }
-  let vtContext = React.useContext(UNSAFE_ViewTransitionContext);
+  let vtContext = React.useContext(ViewTransitionContext);
+  !(vtContext != null) ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "`unstable_useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  " + "Did you accidentally import `RouterProvider` from `react-router`?") : UNSAFE_invariant(false) : void 0;
   let {
@@ -1152,21 +1461,21 @@ basename
   });
-  if (vtContext.isTransitioning) {
-    let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
-    let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
-    // Transition is active if we're going to or coming from the indicated
-    // destination.  This ensures that other PUSH navigations that reverse
-    // an indicated transition apply.  I.e., on the list view you have:
-    //
-    //   <NavLink to="/details/1" unstable_viewTransition>
-    //
-    // If you click the breadcrumb back to the list view:
-    //
-    //   <NavLink to="/list" unstable_viewTransition>
-    //
-    // We should apply the transition because it's indicated as active going
-    // from /list -> /details/1 and therefore should be active on the reverse
-    // (even though this isn't strictly a POP reverse)
-    return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
+  if (!vtContext.isTransitioning) {
+    return false;
   }
-  return false;
+  let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
+  let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
+  // Transition is active if we're going to or coming from the indicated
+  // destination.  This ensures that other PUSH navigations that reverse
+  // an indicated transition apply.  I.e., on the list view you have:
+  //
+  //   <NavLink to="/details/1" unstable_viewTransition>
+  //
+  // If you click the breadcrumb back to the list view:
+  //
+  //   <NavLink to="/list" unstable_viewTransition>
+  //
+  // We should apply the transition because it's indicated as active going
+  // from /list -> /details/1 and therefore should be active on the reverse
+  // (even though this isn't strictly a POP reverse)
+  return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
 }
@@ -1236,3 +1545,3 @@ //#endregion
     hash: locationProp.hash || "",
-    state: locationProp.state || null,
+    state: locationProp.state != null ? locationProp.state : null,
     key: locationProp.key || "default"
@@ -1246,2 +1555,6 @@ };
       let href = typeof to === "string" ? to : createPath$1(to);
+      // Treating this as a full URL will strip any trailing spaces so we need to
+      // pre-encode them since they might be part of a matching splat param from
+      // an ancestor route
+      href = href.replace(/ $/, "%20");
       let encoded = ABSOLUTE_URL_REGEX.test(href) ? new URL(href) : new URL(href, "http://localhost");
@@ -1280,3 +1593,3 @@ return {
 
-export { BrowserRouter, CompatRoute, CompatRouter, Form, HashRouter, Link, NavLink, ScrollRestoration, StaticRouter, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
+export { BrowserRouter, CompatRoute, CompatRouter, Form, HashRouter, Link, NavLink, RouterProvider, ScrollRestoration, StaticRouter, useScrollRestoration as UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createSearchParams, HistoryRouter as unstable_HistoryRouter, usePrompt as unstable_usePrompt, useBeforeUnload, useFetcher, useFetchers, useFormAction, useLinkClickHandler, useSearchParams, useSubmit };
 //# sourceMappingURL=index.js.map

dist/main.js

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-4a8a492a
+ * React Router DOM v5 Compat v0.0.0-experimental-52e9b8eb3
  *
@@ -4,0 +4,0 @@ * Copyright (c) Remix Software Inc.

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

@@ -60,2 +60,10 @@ import type { FormEncType, HTMLFormMethod, RelativeRoutingType } from "@remix-run/router";
     /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
+    /**
      * Set `true` to replace the current entry in the browser's history stack
@@ -82,2 +90,6 @@ * instead of creating a new one (i.e. stay on "the same page"). Defaults
     /**
+     * Enable flushSync for this navigation's state updates
+     */
+    unstable_flushSync?: boolean;
+    /**
      * Enable view transitions on this submission navigation
@@ -84,0 +96,0 @@ */

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

@@ -6,14 +6,19 @@ /**
 import * as React from "react";
-import type { FutureConfig, NavigateOptions, RelativeRoutingType, RouteObject, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod } from "@remix-run/router";
+import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To } from "react-router";
+import type { unstable_DataStrategyFunction, unstable_DataStrategyFunctionArgs, unstable_DataStrategyMatch, Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod, BlockerFunction } from "@remix-run/router";
+import { UNSAFE_ErrorResponseImpl as ErrorResponseImpl } from "@remix-run/router";
 import type { SubmitOptions, ParamKeyValuePair, URLSearchParamsInit, SubmitTarget } from "./dom";
 import { createSearchParams } from "./dom";
-export type { FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
-export { createSearchParams };
-export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, } from "react-router";
-export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, unstable_useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
+export type { unstable_DataStrategyFunction, unstable_DataStrategyFunctionArgs, unstable_DataStrategyMatch, FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
+export { createSearchParams, ErrorResponseImpl as UNSAFE_ErrorResponseImpl };
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, Blocker, BlockerFunction, DataRouteMatch, DataRouteObject, ErrorResponse, Fetcher, FutureConfig, Hash, IndexRouteObject, IndexRouteProps, JsonFunction, LazyRouteFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, NonIndexRouteObject, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathParam, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RouterProviderProps, RoutesProps, Search, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, To, UIMatch, unstable_HandlerResult, } from "react-router";
+export { AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, } from "react-router";
 /** @internal */
-export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, } from "react-router";
+export { UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_NavigationContext, UNSAFE_LocationContext, UNSAFE_RouteContext, UNSAFE_useRouteId, } from "react-router";
 declare global {
     var __staticRouterHydrationData: HydrationState | undefined;
+    var __reactRouterVersion: string;
+    interface Document {
+        startViewTransition(cb: () => Promise<void> | void): ViewTransition;
+    }
 }
@@ -24,2 +29,3 @@ interface DOMRouterOpts {
     hydrationData?: HydrationState;
+    unstable_dataStrategy?: unstable_DataStrategyFunction;
     window?: Window;
@@ -29,6 +35,29 @@ }
 export declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
+type ViewTransitionContextObject = {
+    isTransitioning: false;
+} | {
+    isTransitioning: true;
+    flushSync: boolean;
+    currentLocation: Location;
+    nextLocation: Location;
+};
+declare const ViewTransitionContext: React.Context<ViewTransitionContextObject>;
+export { ViewTransitionContext as UNSAFE_ViewTransitionContext };
+type FetchersContextObject = Map<string, any>;
+declare const FetchersContext: React.Context<FetchersContextObject>;
+export { FetchersContext as UNSAFE_FetchersContext };
+interface ViewTransition {
+    finished: Promise<void>;
+    ready: Promise<void>;
+    updateCallbackDone: Promise<void>;
+    skipTransition(): void;
+}
+/**
+ * Given a Remix Router instance, render the appropriate UI
+ */
+export declare function RouterProvider({ fallbackElement, router, future, }: RouterProviderProps): React.ReactElement;
 export interface BrowserRouterProps {
     basename?: string;
     children?: React.ReactNode;
-    future?: FutureConfig;
+    future?: Partial<FutureConfig>;
     window?: Window;
@@ -43,3 +72,3 @@ }
     children?: React.ReactNode;
-    future?: FutureConfig;
+    future?: Partial<FutureConfig>;
     window?: Window;
@@ -93,3 +122,2 @@ }
     style?: React.CSSProperties | ((props: NavLinkRenderProps) => React.CSSProperties | undefined);
-    unstable_viewTransition?: boolean;
 }
@@ -134,2 +162,10 @@ /**
     /**
+     * Indicate a specific fetcherKey to use when using navigate=false
+     */
+    fetcherKey?: string;
+    /**
+     * navigate=false will use a fetcher instead of a navigation
+     */
+    navigate?: boolean;
+    /**
      * Forces a full document navigation instead of a fetch.
@@ -225,7 +261,8 @@ */
 }): string;
-declare function createFetcherForm(fetcherKey: string, routeId: string): React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
 export type FetcherWithComponents<TData> = Fetcher<TData> & {
-    Form: ReturnType<typeof createFetcherForm>;
+    Form: React.ForwardRefExoticComponent<FetcherFormProps & React.RefAttributes<HTMLFormElement>>;
     submit: FetcherSubmitFunction;
-    load: (href: string) => void;
+    load: (href: string, opts?: {
+        unstable_flushSync?: boolean;
+    }) => void;
 };
@@ -236,3 +273,5 @@ /**
  */
-export declare function useFetcher<TData = any>(): FetcherWithComponents<TData>;
+export declare function useFetcher<TData = any>({ key, }?: {
+    key?: string;
+}): FetcherWithComponents<TData>;
 /**
@@ -242,3 +281,5 @@ * Provides all fetchers currently on the page. Useful for layouts and parent
  */
-export declare function useFetchers(): Fetcher[];
+export declare function useFetchers(): (Fetcher & {
+    key: string;
+})[];
 /**
@@ -271,4 +312,4 @@ * When rendered inside a RouterProvider, will restore scroll positions on navigations
  */
-declare function usePrompt({ when, message }: {
-    when: boolean;
+declare function usePrompt({ when, message, }: {
+    when: boolean | BlockerFunction;
     message: string;
@@ -275,0 +316,0 @@ }): void;

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

 /**
- * React Router DOM v5 Compat v0.0.0-experimental-4a8a492a
+ * React Router DOM v5 Compat v0.0.0-experimental-52e9b8eb3
  *
@@ -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.RemixRouter,e.HistoryLibrary,e.ReactRouterDOM)}(this,(function(e,t,r,n,o,a){"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 s(){return s=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},s.apply(this,arguments)}function c(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}const l="get",f="application/x-www-form-urlencoded";function d(e){return null!=e&&"string"==typeof e.tagName}function m(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]])}),[]))}let p=null;const b=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function h(e){return null==e||b.has(e)?e:null}function y(e,t){let r,o,a,i,u;if(d(s=e)&&"form"===s.tagName.toLowerCase()){let u=e.getAttribute("action");o=u?n.stripBasename(u,t):null,r=e.getAttribute("method")||l,a=h(e.getAttribute("enctype"))||f,i=new FormData(e)}else if(function(e){return d(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return d(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let u=e.form;if(null==u)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let s=e.getAttribute("formaction")||u.getAttribute("action");if(o=s?n.stripBasename(s,t):null,r=e.getAttribute("formmethod")||u.getAttribute("method")||l,a=h(e.getAttribute("formenctype"))||h(u.getAttribute("enctype"))||f,i=new FormData(u,e),!function(){if(null===p)try{new FormData(document.createElement("form"),0),p=!1}catch(e){p=!0}return p}()){let{name:t,type:r,value:n}=e;if("image"===r){let e=t?t+".":"";i.append(e+"x","0"),i.append(e+"y","0")}else t&&i.append(t,n)}}else{if(d(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');r=l,o=null,a=f,u=e}var s;return i&&"text/plain"===a&&(u=i,i=void 0),{action:o,method:r.toLowerCase(),encType:a,formData:i,body:u}}const v=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],g=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],w=["reloadDocument","replace","state","method","action","onSubmit","submit","relative","preventScrollReset","unstable_viewTransition"];function R(){var e;let t=null==(e=window)?void 0:e.__staticRouterHydrationData;return t&&t.errors&&(t=s({},t,{errors:S(t.errors)})),t}function S(e){if(!e)return null;let t=Object.entries(e),r={};for(let[e,o]of t)if(o&&"RouteErrorResponse"===o.__type)r[e]=new n.UNSAFE_ErrorResponseImpl(o.status,o.statusText,o.data,!0===o.internal);else if(o&&"Error"===o.__type){if(o.__subType){let t=window[o.__subType];if("function"==typeof t)try{let n=new t(o.message);n.stack="",r[e]=n}catch(e){}}if(null==r[e]){let t=new Error(o.message);t.stack="",r[e]=t}}else r[e]=o;return r}const E=u.startTransition;const P="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,O=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,_=u.forwardRef((function(e,t){let o,{onClick:a,relative:i,reloadDocument:l,replace:f,state:d,target:m,to:p,preventScrollReset:b,unstable_viewTransition:h}=e,y=c(e,v),{basename:g}=u.useContext(r.UNSAFE_NavigationContext),w=!1;if("string"==typeof p&&O.test(p)&&(o=p,P))try{let e=new URL(window.location.href),t=p.startsWith("//")?new URL(e.protocol+p):new URL(p),r=n.stripBasename(t.pathname,g);t.origin===e.origin&&null!=r?p=r+t.search+t.hash:w=!0}catch(e){}let R=r.useHref(p,{relative:i}),S=T(p,{replace:f,state:d,target:m,preventScrollReset:b,relative:i,unstable_viewTransition:h});return u.createElement("a",s({},y,{href:o||R,onClick:w||l?a:function(e){a&&a(e),e.defaultPrevented||S(e)},ref:t,target:m}))})),N=u.forwardRef((function(e,t){let{"aria-current":o="page",caseSensitive:a=!1,className:i="",end:l=!1,style:f,to:d,unstable_viewTransition:m,children:p}=e,b=c(e,g),h=r.useResolvedPath(d,{relative:b.relative}),y=r.useLocation(),v=u.useContext(r.UNSAFE_DataRouterStateContext),{navigator:w}=u.useContext(r.UNSAFE_NavigationContext),R=function(e,t){void 0===t&&(t={});let o=u.useContext(r.UNSAFE_ViewTransitionContext),{basename:a}=U(C.useViewTransitionState),i=r.useResolvedPath(e,{relative:t.relative});if(o.isTransitioning){let e=n.stripBasename(o.currentLocation.pathname,a)||o.currentLocation.pathname,t=n.stripBasename(o.nextLocation.pathname,a)||o.nextLocation.pathname;return null!=n.matchPath(i.pathname,t)||null!=n.matchPath(i.pathname,e)}return!1}(h)&&!0===m,S=w.encodeLocation?w.encodeLocation(h).pathname:h.pathname,E=y.pathname,P=v&&v.navigation&&v.navigation.location?v.navigation.location.pathname:null;a||(E=E.toLowerCase(),P=P?P.toLowerCase():null,S=S.toLowerCase());let O,N=E===S||!l&&E.startsWith(S)&&"/"===E.charAt(S.length),j=null!=P&&(P===S||!l&&P.startsWith(S)&&"/"===P.charAt(S.length)),A={isActive:N,isPending:j,isTransitioning:R},F=N?o:void 0;O="function"==typeof i?i(A):[i,N?"active":null,j?"pending":null,R?"transitioning":null].filter(Boolean).join(" ");let x="function"==typeof f?f(A):f;return u.createElement(_,s({},b,{"aria-current":F,className:O,ref:t,style:x,to:d,unstable_viewTransition:m}),"function"==typeof p?p(A):p)})),j=u.forwardRef(((e,t)=>{let r=D();return u.createElement(A,s({},e,{submit:r,ref:t}))})),A=u.forwardRef(((e,t)=>{let{reloadDocument:r,replace:n,state:o,method:a=l,action:i,onSubmit:f,submit:d,relative:m,preventScrollReset:p,unstable_viewTransition:b}=e,h=c(e,w),y="get"===a.toLowerCase()?"get":"post",v=M(i,{relative:m});return u.createElement("form",s({ref:t,method:y,action:v,onSubmit:r?f:e=>{if(f&&f(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,r=(null==t?void 0:t.getAttribute("formmethod"))||a;d(t||e.currentTarget,{method:r,replace:n,state:o,relative:m,preventScrollReset:p,unstable_viewTransition:b})}},h))}));var C=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionStates="useViewTransitionStates",e.useViewTransitionState="useViewTransitionState",e}(C||{}),F=function(e){return e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(F||{});function U(e){let t=u.useContext(r.UNSAFE_DataRouterContext);return t||n.UNSAFE_invariant(!1),t}function x(e){let t=u.useContext(r.UNSAFE_DataRouterStateContext);return t||n.UNSAFE_invariant(!1),t}function T(e,t){let{target:n,replace:o,state:a,preventScrollReset:i,relative:s,unstable_viewTransition:c}=void 0===t?{}:t,l=r.useNavigate(),f=r.useLocation(),d=r.useResolvedPath(e,{relative:s});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!==o?o:r.createPath(f)===r.createPath(d);l(e,{replace:n,state:a,preventScrollReset:i,relative:s,unstable_viewTransition:c})}}),[f,l,d,o,a,n,e,i,s,c])}function L(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}function D(){let{router:e}=U(C.UseSubmit),{basename:t}=u.useContext(r.UNSAFE_NavigationContext),n=r.UNSAFE_useRouteId();return u.useCallback((function(r,o){void 0===o&&(o={}),L();let{action:a,method:i,encType:u,formData:s,body:c}=y(r,t);e.navigate(o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,replace:o.replace,state:o.state,fromRouteId:n,unstable_viewTransition:o.unstable_viewTransition})}),[e,t,n])}function k(e,t){let{router:o}=U(C.UseSubmitFetcher),{basename:a}=u.useContext(r.UNSAFE_NavigationContext);return u.useCallback((function(r,i){void 0===i&&(i={}),L();let{action:u,method:s,encType:c,formData:l,body:f}=y(r,a);null==t&&n.UNSAFE_invariant(!1),o.fetch(e,t,i.action||u,{preventScrollReset:i.preventScrollReset,formData:l,body:f,formMethod:i.method||s,formEncType:i.encType||c})}),[o,a,e,t])}function M(e,t){let{relative:o}=void 0===t?{}:t,{basename:a}=u.useContext(r.UNSAFE_NavigationContext),i=u.useContext(r.UNSAFE_RouteContext);i||n.UNSAFE_invariant(!1);let[c]=i.matches.slice(-1),l=s({},r.useResolvedPath(e||".",{relative:o})),f=r.useLocation();if(null==e&&(l.search=f.search,c.route.index)){let e=new URLSearchParams(l.search);e.delete("index"),l.search=e.toString()?"?"+e.toString():""}return e&&"."!==e||!c.route.index||(l.search=l.search?l.search.replace(/^\?/,"?index&"):"?index"),"/"!==a&&(l.pathname="/"===l.pathname?a:n.joinPaths([a,l.pathname])),r.createPath(l)}let B=0;const H="react-router-scroll-positions";let I={};function K(e){let{getKey:t,storageKey:o}=void 0===e?{}:e,{router:a}=U(C.UseScrollRestoration),{restoreScrollPosition:i,preventScrollReset:c}=x(F.UseScrollRestoration),{basename:l}=u.useContext(r.UNSAFE_NavigationContext),f=r.useLocation(),d=r.useMatches(),m=r.useNavigation();u.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(e,t){let{capture:r}=t||{};u.useEffect((()=>{let t=null!=r?{capture:r}:void 0;return window.addEventListener("pagehide",e,t),()=>{window.removeEventListener("pagehide",e,t)}}),[e,r])}(u.useCallback((()=>{if("idle"===m.state){let e=(t?t(f,d):null)||f.key;I[e]=window.scrollY}try{sessionStorage.setItem(o||H,JSON.stringify(I))}catch(e){}window.history.scrollRestoration="auto"}),[o,t,m.state,f,d])),"undefined"!=typeof document&&(u.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(o||H);e&&(I=JSON.parse(e))}catch(e){}}),[o]),u.useLayoutEffect((()=>{let e=t&&"/"!==l?(e,r)=>t(s({},e,{pathname:n.stripBasename(e.pathname,l)||e.pathname}),r):t,r=null==a?void 0:a.enableScrollRestoration(I,(()=>window.scrollY),e);return()=>r&&r()}),[a,l,t]),u.useLayoutEffect((()=>{if(!1!==i)if("number"!=typeof i){if(f.hash){let e=document.getElementById(decodeURIComponent(f.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==c&&window.scrollTo(0,0)}else window.scrollTo(0,i)}),[f,i,c]))}const V=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement)?u.useLayoutEffect:()=>{};const Y=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;Object.defineProperty(e,"AbortedDeferredError",{enumerable:!0,get:function(){return r.AbortedDeferredError}}),Object.defineProperty(e,"Await",{enumerable:!0,get:function(){return r.Await}}),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,"RouterProvider",{enumerable:!0,get:function(){return r.RouterProvider}}),Object.defineProperty(e,"Routes",{enumerable:!0,get:function(){return r.Routes}}),Object.defineProperty(e,"UNSAFE_DataRouterContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterContext}}),Object.defineProperty(e,"UNSAFE_DataRouterStateContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterStateContext}}),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,"UNSAFE_useRouteId",{enumerable:!0,get:function(){return r.UNSAFE_useRouteId}}),Object.defineProperty(e,"createMemoryRouter",{enumerable:!0,get:function(){return r.createMemoryRouter}}),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,"createRoutesFromElements",{enumerable:!0,get:function(){return r.createRoutesFromElements}}),Object.defineProperty(e,"defer",{enumerable:!0,get:function(){return r.defer}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return r.generatePath}}),Object.defineProperty(e,"isRouteErrorResponse",{enumerable:!0,get:function(){return r.isRouteErrorResponse}}),Object.defineProperty(e,"json",{enumerable:!0,get:function(){return r.json}}),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,"redirect",{enumerable:!0,get:function(){return r.redirect}}),Object.defineProperty(e,"redirectDocument",{enumerable:!0,get:function(){return r.redirectDocument}}),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,"unstable_useBlocker",{enumerable:!0,get:function(){return r.unstable_useBlocker}}),Object.defineProperty(e,"useActionData",{enumerable:!0,get:function(){return r.useActionData}}),Object.defineProperty(e,"useAsyncError",{enumerable:!0,get:function(){return r.useAsyncError}}),Object.defineProperty(e,"useAsyncValue",{enumerable:!0,get:function(){return r.useAsyncValue}}),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,"useLoaderData",{enumerable:!0,get:function(){return r.useLoaderData}}),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,"useMatches",{enumerable:!0,get:function(){return r.useMatches}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return r.useNavigate}}),Object.defineProperty(e,"useNavigation",{enumerable:!0,get:function(){return r.useNavigation}}),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,"useRevalidator",{enumerable:!0,get:function(){return r.useRevalidator}}),Object.defineProperty(e,"useRouteError",{enumerable:!0,get:function(){return r.useRouteError}}),Object.defineProperty(e,"useRouteLoaderData",{enumerable:!0,get:function(){return r.useRouteLoaderData}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return r.useRoutes}}),e.BrowserRouter=function(e){let{basename:t,children:o,future:a,window:i}=e,s=u.useRef();null==s.current&&(s.current=n.createBrowserHistory({window:i,v5Compat:!0}));let c=s.current,[l,f]=u.useState({action:c.action,location:c.location}),{v7_startTransition:d}=a||{},m=u.useCallback((e=>{d&&E?E((()=>f(e))):f(e)}),[f,d]);return u.useLayoutEffect((()=>c.listen(m)),[c,m]),u.createElement(r.Router,{basename:t,children:o,location:l.location,navigationType:l.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(a.Route,e)}))},e.CompatRouter=function(e){let{children:t}=e,n=a.useHistory(),[o,i]=u.useState((()=>({location:n.location,action:n.action})));return V((()=>{n.listen(((e,t)=>i({location:e,action:t})))}),[n]),u.createElement(r.Router,{navigationType:o.action,location:o.location,navigator:n},u.createElement(r.Routes,null,u.createElement(r.Route,{path:"*",element:t})))},e.Form=j,e.HashRouter=function(e){let{basename:t,children:o,future:a,window:i}=e,s=u.useRef();null==s.current&&(s.current=n.createHashHistory({window:i,v5Compat:!0}));let c=s.current,[l,f]=u.useState({action:c.action,location:c.location}),{v7_startTransition:d}=a||{},m=u.useCallback((e=>{d&&E?E((()=>f(e))):f(e)}),[f,d]);return u.useLayoutEffect((()=>c.listen(m)),[c,m]),u.createElement(r.Router,{basename:t,children:o,location:l.location,navigationType:l.action,navigator:c})},e.Link=_,e.NavLink=N,e.ScrollRestoration=function(e){let{getKey:t,storageKey:r}=e;return K({getKey:t,storageKey:r}),null},e.StaticRouter=function(e){let{basename:t,children:n,location:a="/"}=e;"string"==typeof a&&(a=o.parsePath(a));let i=o.Action.Pop,s={pathname:a.pathname||"/",search:a.search||"",hash:a.hash||"",state:a.state||null,key:a.key||"default"},c={createHref:e=>"string"==typeof e?e:o.createPath(e),encodeLocation(e){let t="string"==typeof e?e:o.createPath(e),r=Y.test(t)?new URL(t):new URL(t,"http://localhost");return{pathname:r.pathname,search:r.search,hash:r.hash}},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:s,navigationType:i,navigator:c,static:!0})},e.UNSAFE_useScrollRestoration=K,e.createBrowserRouter=function(e,t){return n.createRouter({basename:null==t?void 0:t.basename,future:s({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:n.createBrowserHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||R(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties}).initialize()},e.createHashRouter=function(e,t){return n.createRouter({basename:null==t?void 0:t.basename,future:s({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:n.createHashHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||R(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties}).initialize()},e.createSearchParams=m,e.unstable_HistoryRouter=function(e){let{basename:t,children:n,future:o,history:a}=e,[i,s]=u.useState({action:a.action,location:a.location}),{v7_startTransition:c}=o||{},l=u.useCallback((e=>{c&&E?E((()=>s(e))):s(e)}),[s,c]);return u.useLayoutEffect((()=>a.listen(l)),[a,l]),u.createElement(r.Router,{basename:t,children:n,location:i.location,navigationType:i.action,navigator:a})},e.unstable_usePrompt=function(e){let{when:t,message:n}=e,o=r.unstable_useBlocker(t);u.useEffect((()=>{if("blocked"===o.state){window.confirm(n)?setTimeout(o.proceed,0):o.reset()}}),[o,n]),u.useEffect((()=>{"blocked"!==o.state||t||o.reset()}),[o,t])},e.useBeforeUnload=function(e,t){let{capture:r}=t||{};u.useEffect((()=>{let t=null!=r?{capture:r}:void 0;return window.addEventListener("beforeunload",e,t),()=>{window.removeEventListener("beforeunload",e,t)}}),[e,r])},e.useFetcher=function(){var e;let{router:t}=U(C.UseFetcher),o=u.useContext(r.UNSAFE_RouteContext);o||n.UNSAFE_invariant(!1);let a=null==(e=o.matches[o.matches.length-1])?void 0:e.route.id;null==a&&n.UNSAFE_invariant(!1);let[i]=u.useState((()=>String(++B))),[c]=u.useState((()=>(a||n.UNSAFE_invariant(!1),function(e,t){return u.forwardRef(((r,n)=>{let o=k(e,t);return u.createElement(A,s({},r,{ref:n,submit:o}))}))}(i,a)))),[l]=u.useState((()=>e=>{t||n.UNSAFE_invariant(!1),a||n.UNSAFE_invariant(!1),t.fetch(i,a,e)})),f=k(i,a),d=t.getFetcher(i),m=u.useMemo((()=>s({Form:c,submit:f,load:l},d)),[d,c,f,l]);return u.useEffect((()=>()=>{t?t.deleteFetcher(i):console.warn("No router available to clean up from useFetcher()")}),[t,i]),m},e.useFetchers=function(){return[...x(F.UseFetchers).fetchers.values()]},e.useFormAction=M,e.useLinkClickHandler=T,e.useSearchParams=function(e){let t=u.useRef(m(e)),n=u.useRef(!1),o=r.useLocation(),a=u.useMemo((()=>function(e,t){let r=m(e);return t&&t.forEach(((e,n)=>{r.has(n)||t.getAll(n).forEach((e=>{r.append(n,e)}))})),r}(o.search,n.current?null:t.current)),[o.search]),i=r.useNavigate(),s=u.useCallback(((e,t)=>{const r=m("function"==typeof e?e(a):e);n.current=!0,i("?"+r,t)}),[i,a]);return[a,s]},e.useSubmit=D,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom"),require("react-router"),require("@remix-run/router"),require("history"),require("react-router-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","react-router","@remix-run/router","history","react-router-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactRouterDOMv5Compat={},e.React,e.ReactDOM,e.ReactRouter,e.RemixRouter,e.HistoryLibrary,e.ReactRouterDOM)}(this,(function(e,t,n,r,o,a,i){"use strict";function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=u(t),c=u(n);function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l.apply(this,arguments)}function f(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}const d="get",m="application/x-www-form-urlencoded";function p(e){return null!=e&&"string"==typeof e.tagName}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,n)=>{let r=e[n];return t.concat(Array.isArray(r)?r.map((e=>[n,e])):[[n,r]])}),[]))}let b=null;const v=new Set(["application/x-www-form-urlencoded","multipart/form-data","text/plain"]);function y(e){return null==e||v.has(e)?e:null}function g(e,t){let n,r,a,i,u;if(p(s=e)&&"form"===s.tagName.toLowerCase()){let u=e.getAttribute("action");r=u?o.stripBasename(u,t):null,n=e.getAttribute("method")||d,a=y(e.getAttribute("enctype"))||m,i=new FormData(e)}else if(function(e){return p(e)&&"button"===e.tagName.toLowerCase()}(e)||function(e){return p(e)&&"input"===e.tagName.toLowerCase()}(e)&&("submit"===e.type||"image"===e.type)){let u=e.form;if(null==u)throw new Error('Cannot submit a <button> or <input type="submit"> without a <form>');let s=e.getAttribute("formaction")||u.getAttribute("action");if(r=s?o.stripBasename(s,t):null,n=e.getAttribute("formmethod")||u.getAttribute("method")||d,a=y(e.getAttribute("formenctype"))||y(u.getAttribute("enctype"))||m,i=new FormData(u,e),!function(){if(null===b)try{new FormData(document.createElement("form"),0),b=!1}catch(e){b=!0}return b}()){let{name:t,type:n,value:r}=e;if("image"===n){let e=t?t+".":"";i.append(e+"x","0"),i.append(e+"y","0")}else t&&i.append(t,r)}}else{if(p(e))throw new Error('Cannot submit element that is not <form>, <button>, or <input type="submit|image">');n=d,r=null,a=m,u=e}var s;return i&&"text/plain"===a&&(u=i,i=void 0),{action:r,method:n.toLowerCase(),encType:a,formData:i,body:u}}const w=["onClick","relative","reloadDocument","replace","state","target","to","preventScrollReset","unstable_viewTransition"],R=["aria-current","caseSensitive","className","end","style","to","unstable_viewTransition","children"],S=["fetcherKey","navigate","reloadDocument","replace","state","method","action","onSubmit","relative","preventScrollReset","unstable_viewTransition"];try{window.__reactRouterVersion="0"}catch(e){}function E(){var e;let t=null==(e=window)?void 0:e.__staticRouterHydrationData;return t&&t.errors&&(t=l({},t,{errors:P(t.errors)})),t}function P(e){if(!e)return null;let t=Object.entries(e),n={};for(let[e,r]of t)if(r&&"RouteErrorResponse"===r.__type)n[e]=new o.UNSAFE_ErrorResponseImpl(r.status,r.statusText,r.data,!0===r.internal);else if(r&&"Error"===r.__type){if(r.__subType){let t=window[r.__subType];if("function"==typeof t)try{let o=new t(r.message);o.stack="",n[e]=o}catch(e){}}if(null==n[e]){let t=new Error(r.message);t.stack="",n[e]=t}}else n[e]=r;return n}const _=s.createContext({isTransitioning:!1}),O=s.createContext(new Map),C=s.startTransition,L=c.flushSync,j=s.useId;function x(e){L?L(e):e()}class A{constructor(){this.status="pending",this.promise=new Promise(((e,t)=>{this.resolve=t=>{"pending"===this.status&&(this.status="resolved",e(t))},this.reject=e=>{"pending"===this.status&&(this.status="rejected",t(e))}}))}}function N(e){let{routes:t,future:n,state:o}=e;return r.UNSAFE_useRoutesImpl(t,void 0,o,n)}const T="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement,F=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i,U=s.forwardRef((function(e,t){let n,{onClick:a,relative:i,reloadDocument:u,replace:c,state:d,target:m,to:p,preventScrollReset:h,unstable_viewTransition:b}=e,v=f(e,w),{basename:y}=s.useContext(r.UNSAFE_NavigationContext),g=!1;if("string"==typeof p&&F.test(p)&&(n=p,T))try{let e=new URL(window.location.href),t=p.startsWith("//")?new URL(e.protocol+p):new URL(p),n=o.stripBasename(t.pathname,y);t.origin===e.origin&&null!=n?p=n+t.search+t.hash:g=!0}catch(e){}let R=r.useHref(p,{relative:i}),S=I(p,{replace:c,state:d,target:m,preventScrollReset:h,relative:i,unstable_viewTransition:b});return s.createElement("a",l({},v,{href:n||R,onClick:g||u?a:function(e){a&&a(e),e.defaultPrevented||S(e)},ref:t,target:m}))})),D=s.forwardRef((function(e,t){let{"aria-current":n="page",caseSensitive:a=!1,className:i="",end:u=!1,style:c,to:d,unstable_viewTransition:m,children:p}=e,h=f(e,R),b=r.useResolvedPath(d,{relative:h.relative}),v=r.useLocation(),y=s.useContext(r.UNSAFE_DataRouterStateContext),{navigator:g,basename:w}=s.useContext(r.UNSAFE_NavigationContext),S=null!=y&&function(e,t){void 0===t&&(t={});let n=s.useContext(_);null==n&&o.UNSAFE_invariant(!1);let{basename:a}=B(M.useViewTransitionState),i=r.useResolvedPath(e,{relative:t.relative});if(!n.isTransitioning)return!1;let u=o.stripBasename(n.currentLocation.pathname,a)||n.currentLocation.pathname,c=o.stripBasename(n.nextLocation.pathname,a)||n.nextLocation.pathname;return null!=o.matchPath(i.pathname,c)||null!=o.matchPath(i.pathname,u)}(b)&&!0===m,E=g.encodeLocation?g.encodeLocation(b).pathname:b.pathname,P=v.pathname,O=y&&y.navigation&&y.navigation.location?y.navigation.location.pathname:null;a||(P=P.toLowerCase(),O=O?O.toLowerCase():null,E=E.toLowerCase()),O&&w&&(O=o.stripBasename(O,w)||O);const C="/"!==E&&E.endsWith("/")?E.length-1:E.length;let L,j=P===E||!u&&P.startsWith(E)&&"/"===P.charAt(C),x=null!=O&&(O===E||!u&&O.startsWith(E)&&"/"===O.charAt(E.length)),A={isActive:j,isPending:x,isTransitioning:S},N=j?n:void 0;L="function"==typeof i?i(A):[i,j?"active":null,x?"pending":null,S?"transitioning":null].filter(Boolean).join(" ");let T="function"==typeof c?c(A):c;return s.createElement(U,l({},h,{"aria-current":N,className:L,ref:t,style:T,to:d,unstable_viewTransition:m}),"function"==typeof p?p(A):p)})),k=s.forwardRef(((e,t)=>{let{fetcherKey:n,navigate:r,reloadDocument:o,replace:a,state:i,method:u=d,action:c,onSubmit:m,relative:p,preventScrollReset:h,unstable_viewTransition:b}=e,v=f(e,S),y=Y(),g=q(c,{relative:p}),w="get"===u.toLowerCase()?"get":"post";return s.createElement("form",l({ref:t,method:w,action:g,onSubmit:o?m:e=>{if(m&&m(e),e.defaultPrevented)return;e.preventDefault();let t=e.nativeEvent.submitter,o=(null==t?void 0:t.getAttribute("formmethod"))||u;y(t||e.currentTarget,{fetcherKey:n,method:o,navigate:r,replace:a,state:i,relative:p,preventScrollReset:h,unstable_viewTransition:b})}},v))}));var M=function(e){return e.UseScrollRestoration="useScrollRestoration",e.UseSubmit="useSubmit",e.UseSubmitFetcher="useSubmitFetcher",e.UseFetcher="useFetcher",e.useViewTransitionState="useViewTransitionState",e}(M||{}),H=function(e){return e.UseFetcher="useFetcher",e.UseFetchers="useFetchers",e.UseScrollRestoration="useScrollRestoration",e}(H||{});function B(e){let t=s.useContext(r.UNSAFE_DataRouterContext);return t||o.UNSAFE_invariant(!1),t}function K(e){let t=s.useContext(r.UNSAFE_DataRouterStateContext);return t||o.UNSAFE_invariant(!1),t}function I(e,t){let{target:n,replace:o,state:a,preventScrollReset:i,relative:u,unstable_viewTransition:c}=void 0===t?{}:t,l=r.useNavigate(),f=r.useLocation(),d=r.useResolvedPath(e,{relative:u});return s.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!==o?o:r.createPath(f)===r.createPath(d);l(e,{replace:n,state:a,preventScrollReset:i,relative:u,unstable_viewTransition:c})}}),[f,l,d,o,a,n,e,i,u,c])}let V=0,z=()=>"__"+String(++V)+"__";function Y(){let{router:e}=B(M.UseSubmit),{basename:t}=s.useContext(r.UNSAFE_NavigationContext),n=r.UNSAFE_useRouteId();return s.useCallback((function(r,o){void 0===o&&(o={}),function(){if("undefined"==typeof document)throw new Error("You are calling submit during the server render. Try calling submit within a `useEffect` or callback instead.")}();let{action:a,method:i,encType:u,formData:s,body:c}=g(r,t);if(!1===o.navigate){let t=o.fetcherKey||z();e.fetch(t,n,o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,unstable_flushSync:o.unstable_flushSync})}else e.navigate(o.action||a,{preventScrollReset:o.preventScrollReset,formData:s,body:c,formMethod:o.method||i,formEncType:o.encType||u,replace:o.replace,state:o.state,fromRouteId:n,unstable_flushSync:o.unstable_flushSync,unstable_viewTransition:o.unstable_viewTransition})}),[e,t,n])}function q(e,t){let{relative:n}=void 0===t?{}:t,{basename:a}=s.useContext(r.UNSAFE_NavigationContext),i=s.useContext(r.UNSAFE_RouteContext);i||o.UNSAFE_invariant(!1);let[u]=i.matches.slice(-1),c=l({},r.useResolvedPath(e||".",{relative:n})),f=r.useLocation();if(null==e){c.search=f.search;let e=new URLSearchParams(c.search);e.has("index")&&""===e.get("index")&&(e.delete("index"),c.search=e.toString()?"?"+e.toString():"")}return e&&"."!==e||!u.route.index||(c.search=c.search?c.search.replace(/^\?/,"?index&"):"?index"),"/"!==a&&(c.pathname="/"===c.pathname?a:o.joinPaths([a,c.pathname])),r.createPath(c)}const J="react-router-scroll-positions";let W={};function $(e){let{getKey:t,storageKey:n}=void 0===e?{}:e,{router:a}=B(M.UseScrollRestoration),{restoreScrollPosition:i,preventScrollReset:u}=K(H.UseScrollRestoration),{basename:c}=s.useContext(r.UNSAFE_NavigationContext),f=r.useLocation(),d=r.useMatches(),m=r.useNavigation();s.useEffect((()=>(window.history.scrollRestoration="manual",()=>{window.history.scrollRestoration="auto"})),[]),function(e,t){let{capture:n}=t||{};s.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("pagehide",e,t),()=>{window.removeEventListener("pagehide",e,t)}}),[e,n])}(s.useCallback((()=>{if("idle"===m.state){let e=(t?t(f,d):null)||f.key;W[e]=window.scrollY}try{sessionStorage.setItem(n||J,JSON.stringify(W))}catch(e){}window.history.scrollRestoration="auto"}),[n,t,m.state,f,d])),"undefined"!=typeof document&&(s.useLayoutEffect((()=>{try{let e=sessionStorage.getItem(n||J);e&&(W=JSON.parse(e))}catch(e){}}),[n]),s.useLayoutEffect((()=>{let e=t&&"/"!==c?(e,n)=>t(l({},e,{pathname:o.stripBasename(e.pathname,c)||e.pathname}),n):t,n=null==a?void 0:a.enableScrollRestoration(W,(()=>window.scrollY),e);return()=>n&&n()}),[a,c,t]),s.useLayoutEffect((()=>{if(!1!==i)if("number"!=typeof i){if(f.hash){let e=document.getElementById(decodeURIComponent(f.hash.slice(1)));if(e)return void e.scrollIntoView()}!0!==u&&window.scrollTo(0,0)}else window.scrollTo(0,i)}),[f,i,u]))}const G=!("undefined"==typeof window||void 0===window.document||void 0===window.document.createElement)?s.useLayoutEffect:()=>{};const Q=/^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;Object.defineProperty(e,"AbortedDeferredError",{enumerable:!0,get:function(){return r.AbortedDeferredError}}),Object.defineProperty(e,"Await",{enumerable:!0,get:function(){return r.Await}}),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_DataRouterContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterContext}}),Object.defineProperty(e,"UNSAFE_DataRouterStateContext",{enumerable:!0,get:function(){return r.UNSAFE_DataRouterStateContext}}),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,"UNSAFE_useRouteId",{enumerable:!0,get:function(){return r.UNSAFE_useRouteId}}),Object.defineProperty(e,"createMemoryRouter",{enumerable:!0,get:function(){return r.createMemoryRouter}}),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,"createRoutesFromElements",{enumerable:!0,get:function(){return r.createRoutesFromElements}}),Object.defineProperty(e,"defer",{enumerable:!0,get:function(){return r.defer}}),Object.defineProperty(e,"generatePath",{enumerable:!0,get:function(){return r.generatePath}}),Object.defineProperty(e,"isRouteErrorResponse",{enumerable:!0,get:function(){return r.isRouteErrorResponse}}),Object.defineProperty(e,"json",{enumerable:!0,get:function(){return r.json}}),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,"redirect",{enumerable:!0,get:function(){return r.redirect}}),Object.defineProperty(e,"redirectDocument",{enumerable:!0,get:function(){return r.redirectDocument}}),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,"useActionData",{enumerable:!0,get:function(){return r.useActionData}}),Object.defineProperty(e,"useAsyncError",{enumerable:!0,get:function(){return r.useAsyncError}}),Object.defineProperty(e,"useAsyncValue",{enumerable:!0,get:function(){return r.useAsyncValue}}),Object.defineProperty(e,"useBlocker",{enumerable:!0,get:function(){return r.useBlocker}}),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,"useLoaderData",{enumerable:!0,get:function(){return r.useLoaderData}}),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,"useMatches",{enumerable:!0,get:function(){return r.useMatches}}),Object.defineProperty(e,"useNavigate",{enumerable:!0,get:function(){return r.useNavigate}}),Object.defineProperty(e,"useNavigation",{enumerable:!0,get:function(){return r.useNavigation}}),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,"useRevalidator",{enumerable:!0,get:function(){return r.useRevalidator}}),Object.defineProperty(e,"useRouteError",{enumerable:!0,get:function(){return r.useRouteError}}),Object.defineProperty(e,"useRouteLoaderData",{enumerable:!0,get:function(){return r.useRouteLoaderData}}),Object.defineProperty(e,"useRoutes",{enumerable:!0,get:function(){return r.useRoutes}}),e.BrowserRouter=function(e){let{basename:t,children:n,future:a,window:i}=e,u=s.useRef();null==u.current&&(u.current=o.createBrowserHistory({window:i,v5Compat:!0}));let c=u.current,[l,f]=s.useState({action:c.action,location:c.location}),{v7_startTransition:d}=a||{},m=s.useCallback((e=>{d&&C?C((()=>f(e))):f(e)}),[f,d]);return s.useLayoutEffect((()=>c.listen(m)),[c,m]),s.createElement(r.Router,{basename:t,children:n,location:l.location,navigationType:l.action,navigator:c,future:a})},e.CompatRoute=function(e){let{location:t,path:n}=e;return e.exact||(n+="/*"),s.createElement(r.Routes,{location:t},s.createElement(r.Route,{path:n,element:s.createElement(i.Route,e)}))},e.CompatRouter=function(e){let{children:t}=e,n=i.useHistory(),[o,a]=s.useState((()=>({location:n.location,action:n.action})));return G((()=>{n.listen(((e,t)=>a({location:e,action:t})))}),[n]),s.createElement(r.Router,{navigationType:o.action,location:o.location,navigator:n},s.createElement(r.Routes,null,s.createElement(r.Route,{path:"*",element:t})))},e.Form=k,e.HashRouter=function(e){let{basename:t,children:n,future:a,window:i}=e,u=s.useRef();null==u.current&&(u.current=o.createHashHistory({window:i,v5Compat:!0}));let c=u.current,[l,f]=s.useState({action:c.action,location:c.location}),{v7_startTransition:d}=a||{},m=s.useCallback((e=>{d&&C?C((()=>f(e))):f(e)}),[f,d]);return s.useLayoutEffect((()=>c.listen(m)),[c,m]),s.createElement(r.Router,{basename:t,children:n,location:l.location,navigationType:l.action,navigator:c,future:a})},e.Link=U,e.NavLink=D,e.RouterProvider=function(e){let{fallbackElement:t,router:n,future:o}=e,[a,i]=s.useState(n.state),[u,c]=s.useState(),[l,f]=s.useState({isTransitioning:!1}),[d,m]=s.useState(),[p,h]=s.useState(),[b,v]=s.useState(),y=s.useRef(new Map),{v7_startTransition:g}=o||{},w=s.useCallback((e=>{g?function(e){C?C(e):e()}(e):e()}),[g]),R=s.useCallback(((e,t)=>{let{deletedFetchers:r,unstable_flushSync:o,unstable_viewTransitionOpts:a}=t;r.forEach((e=>y.current.delete(e))),e.fetchers.forEach(((e,t)=>{void 0!==e.data&&y.current.set(t,e.data)}));let u=null==n.window||null==n.window.document||"function"!=typeof n.window.document.startViewTransition;if(a&&!u){if(o){x((()=>{p&&(d&&d.resolve(),p.skipTransition()),f({isTransitioning:!0,flushSync:!0,currentLocation:a.currentLocation,nextLocation:a.nextLocation})}));let t=n.window.document.startViewTransition((()=>{x((()=>i(e)))}));return t.finished.finally((()=>{x((()=>{m(void 0),h(void 0),c(void 0),f({isTransitioning:!1})}))})),void x((()=>h(t)))}p?(d&&d.resolve(),p.skipTransition(),v({state:e,currentLocation:a.currentLocation,nextLocation:a.nextLocation})):(c(e),f({isTransitioning:!0,flushSync:!1,currentLocation:a.currentLocation,nextLocation:a.nextLocation}))}else o?x((()=>i(e))):w((()=>i(e)))}),[n.window,p,d,y,w]);s.useLayoutEffect((()=>n.subscribe(R)),[n,R]),s.useEffect((()=>{l.isTransitioning&&!l.flushSync&&m(new A)}),[l]),s.useEffect((()=>{if(d&&u&&n.window){let e=u,t=d.promise,r=n.window.document.startViewTransition((async()=>{w((()=>i(e))),await t}));r.finished.finally((()=>{m(void 0),h(void 0),c(void 0),f({isTransitioning:!1})})),h(r)}}),[w,u,d,n.window]),s.useEffect((()=>{d&&u&&a.location.key===u.location.key&&d.resolve()}),[d,p,a.location,u]),s.useEffect((()=>{!l.isTransitioning&&b&&(c(b.state),f({isTransitioning:!0,flushSync:!1,currentLocation:b.currentLocation,nextLocation:b.nextLocation}),v(void 0))}),[l.isTransitioning,b]),s.useEffect((()=>{}),[]);let S=s.useMemo((()=>({createHref:n.createHref,encodeLocation:n.encodeLocation,go:e=>n.navigate(e),push:(e,t,r)=>n.navigate(e,{state:t,preventScrollReset:null==r?void 0:r.preventScrollReset}),replace:(e,t,r)=>n.navigate(e,{replace:!0,state:t,preventScrollReset:null==r?void 0:r.preventScrollReset})})),[n]),E=n.basename||"/",P=s.useMemo((()=>({router:n,navigator:S,static:!1,basename:E})),[n,S,E]);return s.createElement(s.Fragment,null,s.createElement(r.UNSAFE_DataRouterContext.Provider,{value:P},s.createElement(r.UNSAFE_DataRouterStateContext.Provider,{value:a},s.createElement(O.Provider,{value:y.current},s.createElement(_.Provider,{value:l},s.createElement(r.Router,{basename:E,location:a.location,navigationType:a.historyAction,navigator:S,future:{v7_relativeSplatPath:n.future.v7_relativeSplatPath}},a.initialized||n.future.v7_partialHydration?s.createElement(N,{routes:n.routes,future:n.future,state:a}):t))))),null)},e.ScrollRestoration=function(e){let{getKey:t,storageKey:n}=e;return $({getKey:t,storageKey:n}),null},e.StaticRouter=function(e){let{basename:t,children:n,location:o="/"}=e;"string"==typeof o&&(o=a.parsePath(o));let i=a.Action.Pop,u={pathname:o.pathname||"/",search:o.search||"",hash:o.hash||"",state:null!=o.state?o.state:null,key:o.key||"default"},c={createHref:e=>"string"==typeof e?e:a.createPath(e),encodeLocation(e){let t="string"==typeof e?e:a.createPath(e);t=t.replace(/ $/,"%20");let n=Q.test(t)?new URL(t):new URL(t,"http://localhost");return{pathname:n.pathname,search:n.search,hash:n.hash}},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 s.createElement(r.Router,{basename:t,children:n,location:u,navigationType:i,navigator:c,static:!0})},e.UNSAFE_useScrollRestoration=$,e.createBrowserRouter=function(e,t){return o.createRouter({basename:null==t?void 0:t.basename,future:l({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:o.createBrowserHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||E(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties,unstable_dataStrategy:null==t?void 0:t.unstable_dataStrategy,window:null==t?void 0:t.window}).initialize()},e.createHashRouter=function(e,t){return o.createRouter({basename:null==t?void 0:t.basename,future:l({},null==t?void 0:t.future,{v7_prependBasename:!0}),history:o.createHashHistory({window:null==t?void 0:t.window}),hydrationData:(null==t?void 0:t.hydrationData)||E(),routes:e,mapRouteProperties:r.UNSAFE_mapRouteProperties,unstable_dataStrategy:null==t?void 0:t.unstable_dataStrategy,window:null==t?void 0:t.window}).initialize()},e.createSearchParams=h,e.unstable_HistoryRouter=function(e){let{basename:t,children:n,future:o,history:a}=e,[i,u]=s.useState({action:a.action,location:a.location}),{v7_startTransition:c}=o||{},l=s.useCallback((e=>{c&&C?C((()=>u(e))):u(e)}),[u,c]);return s.useLayoutEffect((()=>a.listen(l)),[a,l]),s.createElement(r.Router,{basename:t,children:n,location:i.location,navigationType:i.action,navigator:a,future:o})},e.unstable_usePrompt=function(e){let{when:t,message:n}=e,o=r.useBlocker(t);s.useEffect((()=>{if("blocked"===o.state){window.confirm(n)?setTimeout(o.proceed,0):o.reset()}}),[o,n]),s.useEffect((()=>{"blocked"!==o.state||t||o.reset()}),[o,t])},e.useBeforeUnload=function(e,t){let{capture:n}=t||{};s.useEffect((()=>{let t=null!=n?{capture:n}:void 0;return window.addEventListener("beforeunload",e,t),()=>{window.removeEventListener("beforeunload",e,t)}}),[e,n])},e.useFetcher=function(e){var t;let{key:n}=void 0===e?{}:e,{router:a}=B(M.UseFetcher),i=K(H.UseFetcher),u=s.useContext(O),c=s.useContext(r.UNSAFE_RouteContext),f=null==(t=c.matches[c.matches.length-1])?void 0:t.route.id;u||o.UNSAFE_invariant(!1),c||o.UNSAFE_invariant(!1),null==f&&o.UNSAFE_invariant(!1);let d=j?j():"",[m,p]=s.useState(n||d);n&&n!==m?p(n):m||p(z()),s.useEffect((()=>(a.getFetcher(m),()=>{a.deleteFetcher(m)})),[a,m]);let h=s.useCallback(((e,t)=>{f||o.UNSAFE_invariant(!1),a.fetch(m,f,e,t)}),[m,f,a]),b=Y(),v=s.useCallback(((e,t)=>{b(e,l({},t,{navigate:!1,fetcherKey:m}))}),[m,b]),y=s.useMemo((()=>s.forwardRef(((e,t)=>s.createElement(k,l({},e,{navigate:!1,fetcherKey:m,ref:t}))))),[m]),g=i.fetchers.get(m)||o.IDLE_FETCHER,w=u.get(m);return s.useMemo((()=>l({Form:y,submit:v,load:h},g,{data:w})),[y,v,h,g,w])},e.useFetchers=function(){let e=K(H.UseFetchers);return Array.from(e.fetchers.entries()).map((e=>{let[t,n]=e;return l({},n,{key:t})}))},e.useFormAction=q,e.useLinkClickHandler=I,e.useSearchParams=function(e){let t=s.useRef(h(e)),n=s.useRef(!1),o=r.useLocation(),a=s.useMemo((()=>function(e,t){let n=h(e);return t&&t.forEach(((e,r)=>{n.has(r)||t.getAll(r).forEach((e=>{n.append(r,e)}))})),n}(o.search,n.current?null:t.current)),[o.search]),i=r.useNavigate(),u=s.useCallback(((e,t)=>{const r=h("function"==typeof e?e(a):e);n.current=!0,i("?"+r,t)}),[i,a]);return[a,u]},e.useSubmit=Y,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": "0.0.0-experimental-4a8a492a",
+  "version": "0.0.0-experimental-52e9b8eb3",
   "description": "Migration path to React Router v6 from v4/5",
@@ -27,3 +27,4 @@ "keywords": [
     "history": "^5.3.0",
-    "react-router": "0.0.0-experimental-4a8a492a"
+    "react-router": "0.0.0-experimental-52e9b8eb3",
+    "@remix-run/router": "0.0.0-experimental-52e9b8eb3"
   },
@@ -44,2 +45,2 @@ "peerDependencies": {
   }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

581366

increased by24.25%

Lines of code

3990

increased by21.2%

Worsened metrics

Dependency count

6

increased by20%

Number of low supply chain risk alerts

22

increased by4.76%

Dependency changes

• + Added@remix-run/router@0.0.0-experimental-52e9b8eb3

• + Added@remix-run/router@0.0.0-experimental-52e9b8eb3(transitive)

• + Addedreact-router@0.0.0-experimental-52e9b8eb3(transitive)

• - Removed@remix-run/router@0.0.0-experimental-4a8a492a(transitive)

• - Removedreact-router@0.0.0-experimental-4a8a492a(transitive)

• Updatedreact-router@0.0.0-experimental-52e9b8eb3