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

package/CHANGELOG.md

@@ -1,177 +1,10 @@
 # `react-router-dom`
 
-## 6.21.3
-
-### Patch Changes
-
-- Fix `NavLink` `isPending` when a `basename` is used ([#11195](https://github.com/remix-run/react-router/pull/11195))
-- Remove leftover `unstable_` prefix from `Blocker`/`BlockerFunction` types ([#11187](https://github.com/remix-run/react-router/pull/11187))
-- Updated dependencies:
-  - `react-router@6.21.3`
-
-## 6.21.2
-
-### Patch Changes
-
-- Leverage `useId` for internal fetcher keys when available ([#11166](https://github.com/remix-run/react-router/pull/11166))
-- Updated dependencies:
-  - `@remix-run/router@1.14.2`
-  - `react-router@6.21.2`
-
-## 6.21.1
-
-### Patch Changes
-
-- Updated dependencies:
-  - `react-router@6.21.1`
-  - `@remix-run/router@1.14.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:
-  - `@remix-run/router@1.14.0`
-  - `react-router@6.21.0`
-
 ## 6.20.1
 
 ### Patch Changes
 
-- Revert the `useResolvedPath` fix for splat routes due to a large number of applications that were relying on the buggy behavior (see <https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329>). We plan to re-introduce this fix behind a future flag in the next minor version. ([#11078](https://github.com/remix-run/react-router/pull/11078))
+- Revert the `useResolvedPath` fix for splat routes due to a large number of applications that were relying on the buggy behavior (see https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329). We plan to re-introduce this fix behind a future flag in the next minor version. ([#11078](https://github.com/remix-run/react-router/pull/11078))
 - Updated dependencies:
   - `react-router@6.20.1`
   - `@remix-run/router@1.13.1`
@@ -426,7 +259,7 @@
 
 ## 6.12.1
 
-> \[!WARNING]
+> [!WARNING]
 > Please use version `6.13.0` or later instead of `6.12.1`. This version suffers from a `webpack`/`terser` minification issue resulting in invalid minified code in your resulting production bundles which can cause issues in your application. See [#10579](https://github.com/remix-run/react-router/issues/10579) for more details.
 
 ### Patch Changes
@@ -761,7 +594,7 @@
 
 ## 6.4.0
 
-Whoa this is a big one! `6.4.0` brings all the data loading and mutation APIs over from Remix. Here's a quick high level overview, but it's recommended you go check out the [docs](https://reactrouter.com), especially the [feature overview](https://reactrouter.com/start/overview) and the [tutorial](https://reactrouter.com/start/tutorial).
+Whoa this is a big one! `6.4.0` brings all the data loading and mutation APIs over from Remix. Here's a quick high level overview, but it's recommended you go check out the [docs][rr-docs], especially the [feature overview][rr-feature-overview] and the [tutorial][rr-tutorial].
 
 **New APIs**
 
@@ -787,3 +620,7 @@ Whoa this is a big one! `6.4.0` brings all the data loading and mutation APIs ov
 **Updated Dependencies**
 
 - `react-router@6.4.0`
+
+[rr-docs]: https://reactrouter.com
+[rr-feature-overview]: https://reactrouter.com/start/overview
+[rr-tutorial]: https://reactrouter.com/start/tutorial

package/dist/index.d.ts

@@ -4,12 +4,13 @@
  */
 import * as React from "react";
 import type { FutureConfig, Location, NavigateOptions, RelativeRoutingType, RouteObject, RouterProviderProps, To } from "react-router";
-import type { Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod, BlockerFunction } from "@remix-run/router";
+import type { DataResult, DataStrategyFunction, DataStrategyFunctionArgs, Fetcher, FormEncType, FormMethod, FutureConfig as RouterFutureConfig, GetScrollRestorationKeyFunction, History, HTMLFormMethod, HydrationState, Router as RemixRouter, V7_FormMethod, BlockerFunction } from "@remix-run/router";
+import { ResultType, 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, 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, } from "react-router";
+export type { DataResult, DataStrategyFunction, DataStrategyFunctionArgs, FormEncType, FormMethod, GetScrollRestorationKeyFunction, ParamKeyValuePair, SubmitOptions, URLSearchParamsInit, V7_FormMethod, };
+export { createSearchParams, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, ResultType, };
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, unstable_Blocker, unstable_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, } 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_useRouteId, } from "react-router";
@@ -24,6 +25,7 @@ interface DOMRouterOpts {
     future?: Partial<Omit<RouterFutureConfig, "v7_prependBasename">>;
     hydrationData?: HydrationState;
     window?: Window;
+    unstable_dataStrategy?: DataStrategyFunction;
 }
 export declare function createBrowserRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;
 export declare function createHashRouter(routes: RouteObject[], opts?: DOMRouterOpts): RemixRouter;

package/dist/index.js

@@ -1,5 +1,5 @@
 /**
- * React Router DOM v0.0.0-experimental-c9f8a7b2
+ * React Router DOM v0.0.0-experimental-e960cf1a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -13,6 +13,7 @@ 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 } 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';
+export { ResultType, UNSAFE_ErrorResponseImpl } from '@remix-run/router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -222,7 +223,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) {
@@ -328,8 +330,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);
@@ -524,7 +524,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
   }, []);
@@ -549,7 +549,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
@@ -569,11 +572,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
@@ -798,8 +798,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
@@ -813,9 +812,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:
   //
@@ -1139,14 +1135,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