react-router 6.4.0-pre.10 → 6.4.0-pre.13

package/CHANGELOG.md

@@ -1,18 +1,74 @@
 # react-router
 
+## 6.4.0-pre.13
+
+### Patch Changes
+
+- feat: add `relative=path` option for url-relative routing (#9160)
+
+  Adds a `relative=path` option to navigation aspects to allow users to opt-into paths behaving relative to the current URL instead of the current route hierarchy. This is useful if you're sharing route patterns in a non-nested structure UI reasons:
+
+  ```jsx
+  // Contact and EditContact do not share UI layout
+  <Route path="contacts/:id" element={<Contact />} />
+  <Route path="contacts:id/edit" element={<EditContact />} />
+
+  function EditContact() {
+    return <Link to=".." relative="path">Cancel</Link>
+  }
+  ```
+
+  Without this, the user would need to reconstruct the `contacts/:id` url using `useParams` and either hardcoding the `/contacts` prefix or parsing it from `useLocation`.
+
+  This applies to all path-related hooks and components:
+
+  - `react-router`: `useHref`, `useResolvedPath`, `useNavigate`, `Navigate`
+  - `react-router-dom`: `useLinkClickHandler`, `useFormAction`, `useSubmit`, `Link`, `Form`
+  - `react-router-native`: `useLinkPressHandler`, `Link`
+
+- Updated dependencies
+  - @remix-run/router@0.2.0-pre.8
+
+## 6.4.0-pre.12
+
+### Patch Changes
+
+- fix: avoid navigation loops in `<Navigate>` re-renders in data routers (#9124)
+- Updated dependencies
+  - @remix-run/router@0.2.0-pre.7
+
+## 6.4.0-pre.11
+
+### Patch Changes
+
+- c3406eb9: fix: Rename `<Deferred>` to `<Await>` (#9095)
+
+  - We are no longer replacing the `Promise` on `loaderData` with the value/error
+    when it settles so it's now always a `Promise`.
+  - To that end, we changed from `<Deferred value={promise}>` to
+    `<Await resolve={promise}>` for clarity, and it also now supports using
+    `<Await>` with raw promises from anywhere, not only those on `loaderData`
+    from a defer() call.
+    - Note that raw promises will not be automatically cancelled on interruptions
+      so they are not recommended
+  - The hooks are now `useAsyncValue`/`useAsyncError`
+
+- Updated dependencies
+  - @remix-run/router@0.2.0-pre.6
+
 ## 6.4.0-pre.10
 
 ### Patch Changes
 
 - feat: Deferred API Updates (#9070)
 
-  - Removes `<Suspense>` from inside `<Deferred>`, requires users to render their own suspense boundaries
-  - Updates `Deferred` to use a true error boundary to catch render errors as well as data errors
+  - Removes `<Suspense>` from inside `<Await>`, requires users to render their own suspense boundaries
+  - Updates `Await` to use a true error boundary to catch render errors as well as data errors
   - Support array and single promise usages
-    - `return deferred([ await critical(), lazy() ])`
-    - `return deferred(lazy())`
+    - `return defer([ await critical(), lazy() ])`
+    - `return defer(lazy())`
   - Remove `Deferrable`/`ResolvedDeferrable` in favor of raw `Promise`'s and `Awaited`
-  - Remove generics from `useDeferredData` until `useLoaderData` generic is decided in 6.5
+  - Remove generics from `useAsyncValue` until `useLoaderData` generic is decided in 6.5
 
 - Updated dependencies
   - @remix-run/router@0.2.0-pre.5
@@ -21,46 +77,46 @@
 
 ### Patch Changes
 
-- Feat: adds `deferred` support to data routers (#9002)
+- Feat: adds `defer()` support to data routers (#9002)
 
-  Returning a `deferred` from a `loader` allows you to separate _critical_ loader data that you want to wait for prior to rendering the destination page from _non-critical_ data that you are OK to show a spinner for until it loads.
+  Returning a `defer()` from a `loader` allows you to separate _critical_ loader data that you want to wait for prior to rendering the destination page from _non-critical_ data that you are OK to show a spinner for until it loads.
 
   ```jsx
-  // In your route loader, return a deferred() and choose per-key whether to
+  // In your route loader, return a defer() and choose per-key whether to
   // await the promise or not.  As soon as the awaited promises resolve, the
   // page will be rendered.
   function loader() {
-    return deferred({
+    return defer({
       critical: await getCriticalData(),
       lazy: getLazyData(),
     });
   };
 
   // In your route element, grab the values from useLoaderData and render them
-  // with <Deferred>
-  function DeferredPage() {
+  // with <Await>
+  function Page() {
     let data = useLoaderData();
     return (
       <>
         <p>Critical Data: {data.critical}</p>
-        <Suspense fallback={<p>Loading...</p>}>
-          <Deferred value={data.lazy} errorElement={<RenderDeferredError />}>
-            <RenderDeferredData />
-          </Deferred>
-        </Suspense>
+        <React.Suspense fallback={<p>Loading...</p>}>
+          <Await resolve={data.lazy} errorElement={<RenderError />}>
+            <RenderData />
+          </Await>
+        </React.Suspense>
       </>
     );
   }
 
   // Use separate components to render the data once it resolves, and access it
-  // via the useDeferredData hook
-  function RenderDeferredData() {
-    let data = useDeferredData();
+  // via the useAsyncValue hook
+  function RenderData() {
+    let data = useAsyncValue();
     return <p>Lazy: {data}</p>;
   }
 
-  function RenderDeferredError() {
-    let data = useRouteError();
+  function RenderError() {
+    let data = useAsyncError();
     return <p>Error! {data.message} {data.stack}</p>;
   }
   ```
@@ -69,16 +125,16 @@
   pattern and handle the rendering of the deferred data inline:
 
   ```jsx
-  function DeferredPage() {
+  function Page() {
     let data = useLoaderData();
     return (
       <>
         <p>Critical Data: {data.critical}</p>
-        <Suspense fallback={<p>Loading...</p>}>
-          <Deferred value={data.lazy} errorElement={<RenderDeferredError />}>
+        <React.Suspense fallback={<p>Loading...</p>}>
+          <Await resolve={data.lazy} errorElement={<RenderError />}>
             {(data) => <p>{data}</p>}
-          </Deferred>
-        </Suspense>
+          </Await>
+        </React.Suspense>
       </>
     );
   }

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-import type { ActionFunction, ActionFunctionArgs, DataRouteMatch, Fetcher, JsonFunction, LoaderFunction, LoaderFunctionArgs, Location, Navigation, Params, ParamParseKey, Path, PathMatch, PathPattern, RedirectFunction, RouteMatch, RouteObject, ShouldRevalidateFunction, To } from "@remix-run/router";
-import { Action as NavigationType, createPath, deferred, generatePath, isDeferredError, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
-import type { DataMemoryRouterProps, DeferredProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
-import { createRoutesFromChildren, renderMatches, DataMemoryRouter, DataRouter, DataRouterProvider, Deferred, MemoryRouter, Navigate, Outlet, Route, Router, Routes } from "./lib/components";
-import type { Navigator, NavigateOptions } from "./lib/context";
+import type { ActionFunction, ActionFunctionArgs, Fetcher, JsonFunction, LoaderFunction, LoaderFunctionArgs, Location, Navigation, Params, ParamParseKey, Path, PathMatch, PathPattern, RedirectFunction, ShouldRevalidateFunction, To } from "@remix-run/router";
+import { Action as NavigationType, createPath, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, resolvePath } from "@remix-run/router";
+import type { DataMemoryRouterProps, AwaitProps, MemoryRouterProps, NavigateProps, OutletProps, RouteProps, PathRouteProps, LayoutRouteProps, IndexRouteProps, RouterProps, RoutesProps } from "./lib/components";
+import { enhanceManualRouteObjects, createRoutesFromChildren, renderMatches, DataMemoryRouter, DataRouter, DataRouterProvider, Await, MemoryRouter, Navigate, Outlet, Route, Router, Routes } from "./lib/components";
+import type { DataRouteMatch, DataRouteObject, Navigator, NavigateOptions, RouteMatch, RouteObject, RelativeRoutingType } from "./lib/context";
 import { DataRouterContext, DataRouterStateContext, DataStaticRouterContext, LocationContext, NavigationContext, RouteContext } from "./lib/context";
 import type { NavigateFunction } from "./lib/hooks";
-import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useDeferredData, useLoaderData, useMatches, useRouteLoaderData, useRouteError, useNavigation, useRevalidator } from "./lib/hooks";
+import { useHref, useInRouterContext, useLocation, useMatch, useNavigationType, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useActionData, useAsyncError, useAsyncValue, useLoaderData, useMatches, useNavigation, useRevalidator, useRouteError, useRouteLoaderData } from "./lib/hooks";
 declare type Hash = string;
 declare type Pathname = string;
 declare type Search = string;
-export type { ActionFunction, ActionFunctionArgs, DataMemoryRouterProps, DataRouteMatch, DeferredProps, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
-export { DataMemoryRouter, Deferred, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, deferred, isDeferredError, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useDeferredData, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
+export type { ActionFunction, ActionFunctionArgs, AwaitProps, DataMemoryRouterProps, DataRouteMatch, DataRouteObject, Fetcher, Hash, IndexRouteProps, JsonFunction, LayoutRouteProps, LoaderFunction, LoaderFunctionArgs, Location, MemoryRouterProps, NavigateFunction, NavigateOptions, NavigateProps, Navigation, Navigator, OutletProps, Params, ParamParseKey, Path, PathMatch, Pathname, PathPattern, PathRouteProps, RedirectFunction, RelativeRoutingType, RouteMatch, RouteObject, RouteProps, RouterProps, RoutesProps, Search, ShouldRevalidateFunction, To, };
+export { DataMemoryRouter, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, createPath, createRoutesFromChildren, defer, isRouteErrorResponse, generatePath, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, };
 /** @internal */
-export { DataRouter as UNSAFE_DataRouter, DataRouterProvider as UNSAFE_DataRouterProvider, NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, DataStaticRouterContext as UNSAFE_DataStaticRouterContext, };
+export { DataRouter as UNSAFE_DataRouter, DataRouterProvider as UNSAFE_DataRouterProvider, NavigationContext as UNSAFE_NavigationContext, LocationContext as UNSAFE_LocationContext, RouteContext as UNSAFE_RouteContext, DataRouterContext as UNSAFE_DataRouterContext, DataRouterStateContext as UNSAFE_DataRouterStateContext, DataStaticRouterContext as UNSAFE_DataStaticRouterContext, enhanceManualRouteObjects as UNSAFE_enhanceManualRouteObjects, };