react-router-dom-v5-compat 0.0.0-experimental-c9f8a7b2 → 0.0.0-experimental-e960cf1a

package/CHANGELOG.md

@@ -1,171 +1,5 @@
 # `react-router-dom-v5-compat`
 
-## 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

package/dist/index.d.ts

@@ -46,7 +46,7 @@
  *   would break. We could stop doing two bundles in v6 "react-router-dom" and
  *   deprecate the deep require if we wanted to avoid the duplication here.
  */
-export type { ActionFunction, ActionFunctionArgs, AwaitProps, BrowserRouterProps, 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, } from "./react-router-dom";
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, BrowserRouterProps, 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, 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, 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";

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v5 Compat v0.0.0-experimental-c9f8a7b2
+ * React Router DOM v5 Compat v0.0.0-experimental-e960cf1a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -224,7 +224,8 @@ function createBrowserRouter(routes, opts) {
     hydrationData: (opts == null ? void 0 : opts.hydrationData) || parseHydrationData(),
     routes,
     mapRouteProperties: UNSAFE_mapRouteProperties,
-    window: opts == null ? void 0 : opts.window
+    window: opts == null ? void 0 : opts.window,
+    unstable_dataStrategy: opts == null ? void 0 : opts.unstable_dataStrategy
   }).initialize();
 }
 function createHashRouter(routes, opts) {
@@ -330,8 +331,6 @@ const START_TRANSITION = "startTransition";
 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);
@@ -526,7 +525,7 @@ function RouterProvider(_ref) {
     }
   }, [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;
+    process.env.NODE_ENV !== "production" ? UNSAFE_warning(fallbackElement == null || !router.future.v7_partialHydration, "`<RouterProvider fallbackElement>` is deprecated when using `v7_partialHydration`") : void 0;
     // Only log this once on initial mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -551,7 +550,10 @@ function RouterProvider(_ref) {
     router,
     navigator,
     static: false,
-    basename
+    basename,
+    future: {
+      v7_relativeSplatPath: router.future.v7_relativeSplatPath
+    }
   }), [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
@@ -571,11 +573,8 @@ function RouterProvider(_ref) {
     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, {
+    navigator: navigator
+  }, state.initialized ? /*#__PURE__*/React.createElement(DataRoutes, {
     routes: router.routes,
     future: router.future,
     state: state
@@ -800,8 +799,7 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref
   let location = useLocation();
   let routerState = React.useContext(UNSAFE_DataRouterStateContext);
   let {
-    navigator,
-    basename
+    navigator
   } = React.useContext(UNSAFE_NavigationContext);
   let isTransitioning = routerState != null &&
   // Conditional usage is OK here because the usage of a data router is static
@@ -815,9 +813,6 @@ const NavLink = /*#__PURE__*/React.forwardRef(function NavLinkWithRef(_ref8, ref
     nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
     toPathname = toPathname.toLowerCase();
   }
-  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:
   //
@@ -1141,14 +1136,10 @@ function useFetcher(_temp3) {
   !route ? process.env.NODE_ENV !== "production" ? UNSAFE_invariant(false, "useFetcher must be used inside a RouteContext") : UNSAFE_invariant(false) : void 0;
   !(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;
   // 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);
+  let [fetcherKey, setFetcherKey] = React.useState(key || "");
   if (key && key !== fetcherKey) {
     setFetcherKey(key);
   } else if (!fetcherKey) {
-    // We will only fall through here when `useId` is not available
     setFetcherKey(getUniqueFetcherId());
   }
   // Registration/cleanup