react-router 7.9.3-pre.0 → 7.9.4-pre.0

package/CHANGELOG.md

@@ -1,6 +1,111 @@
 # `react-router`
 
-## 7.9.3-pre.0
+## 7.9.4-pre.0
+
+### Patch Changes
+
+- handle external redirects in from server actions ([#14400](https://github.com/remix-run/react-router/pull/14400))
+- New (unstable) `useRoute` hook for accessing data from specific routes ([#14407](https://github.com/remix-run/react-router/pull/14407))
+
+  For example, let's say you have an `admin` route somewhere in your app and you want any child routes of `admin` to all have access to the `loaderData` and `actionData` from `admin.`
+
+  ```tsx
+  // app/routes/admin.tsx
+  import { Outlet } from "react-router";
+
+  export const loader = () => ({ message: "Hello, loader!" });
+
+  export const action = () => ({ count: 1 });
+
+  export default function Component() {
+    return (
+      <div>
+        {/* ... */}
+        <Outlet />
+        {/* ... */}
+      </div>
+    );
+  }
+  ```
+
+  You might even want to create a reusable widget that all of the routes nested under `admin` could use:
+
+  ```tsx
+  import { unstable_useRoute as useRoute } from "react-router";
+
+  export function AdminWidget() {
+    // How to get `message` and `count` from `admin` route?
+  }
+  ```
+
+  In framework mode, `useRoute` knows all your app's routes and gives you TS errors when invalid route IDs are passed in:
+
+  ```tsx
+  export function AdminWidget() {
+    const admin = useRoute("routes/dmin");
+    //                      ^^^^^^^^^^^
+  }
+  ```
+
+  `useRoute` returns `undefined` if the route is not part of the current page:
+
+  ```tsx
+  export function AdminWidget() {
+    const admin = useRoute("routes/admin");
+    if (!admin) {
+      throw new Error(`AdminWidget used outside of "routes/admin"`);
+    }
+  }
+  ```
+
+  Note: the `root` route is the exception since it is guaranteed to be part of the current page.
+  As a result, `useRoute` never returns `undefined` for `root`.
+
+  `loaderData` and `actionData` are marked as optional since they could be accessed before the `action` is triggered or after the `loader` threw an error:
+
+  ```tsx
+  export function AdminWidget() {
+    const admin = useRoute("routes/admin");
+    if (!admin) {
+      throw new Error(`AdminWidget used outside of "routes/admin"`);
+    }
+    const { loaderData, actionData } = admin;
+    console.log(loaderData);
+    //          ^? { message: string } | undefined
+    console.log(actionData);
+    //          ^? { count: number } | undefined
+  }
+  ```
+
+  If instead of a specific route, you wanted access to the _current_ route's `loaderData` and `actionData`, you can call `useRoute` without arguments:
+
+  ```tsx
+  export function AdminWidget() {
+    const currentRoute = useRoute();
+    currentRoute.loaderData;
+    currentRoute.actionData;
+  }
+  ```
+
+  This usage is equivalent to calling `useLoaderData` and `useActionData`, but consolidates all route data access into one hook: `useRoute`.
+
+  Note: when calling `useRoute()` (without a route ID), TS has no way to know which route is the current route.
+  As a result, `loaderData` and `actionData` are typed as `unknown`.
+  If you want more type-safety, you can either narrow the type yourself with something like `zod` or you can refactor your app to pass down typed props to your `AdminWidget`:
+
+  ```tsx
+  export function AdminWidget({
+    message,
+    count,
+  }: {
+    message: string;
+    count: number;
+  }) {
+    /* ... */
+  }
+  ```
+
+## 7.9.3
 
 ### Patch Changes
 

package/dist/development/{chunk-HHJJZWWP.mjs → chunk-5IRCOFJ2.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.9.3-pre.0
+ * react-router v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -60,7 +60,7 @@ import {
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-TZREDCP7.mjs";
+} from "./chunk-I2PHXWY4.mjs";
 
 // lib/dom/ssr/server.tsx
 import * as React from "react";
@@ -1873,7 +1873,7 @@ function createCallServer({
     globalVar.__reactRouterDataRouter.__setPendingRerender(
       Promise.resolve(payloadPromise).then(async (payload) => {
         if (payload.type === "redirect") {
-          if (payload.reload) {
+          if (payload.reload || isExternalLocation(payload.location)) {
             window.location.href = payload.location;
             return () => {
             };
@@ -1890,7 +1890,7 @@ function createCallServer({
         const rerender = await payload.rerender;
         if (rerender && landedActionId < actionId && globalVar.__routerActionID <= actionId) {
           if (rerender.type === "redirect") {
-            if (rerender.reload) {
+            if (rerender.reload || isExternalLocation(rerender.location)) {
               window.location.href = rerender.location;
               return;
             }
@@ -2460,6 +2460,10 @@ function debounce(callback, wait) {
     timeoutId = window.setTimeout(() => callback(...args), wait);
   };
 }
+function isExternalLocation(location2) {
+  const newLocation = new URL(location2, window.location.href);
+  return newLocation.origin !== window.location.origin;
+}
 
 // lib/rsc/server.ssr.tsx
 import * as React5 from "react";

package/dist/development/{chunk-TZREDCP7.mjs → chunk-I2PHXWY4.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.9.3-pre.0
+ * react-router v7.9.4-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -5552,6 +5552,19 @@ function warningOnce(key, cond, message) {
     warning(false, message);
   }
 }
+function useRoute(...args) {
+  const currentRouteId = useCurrentRouteId(
+    "useRoute" /* UseRoute */
+  );
+  const id = args[0] ?? currentRouteId;
+  const state = useDataRouterState("useRouteLoaderData" /* UseRouteLoaderData */);
+  const route = state.matches.find(({ route: route2 }) => route2.id === id);
+  if (route === void 0) return void 0;
+  return {
+    loaderData: state.loaderData[id],
+    actionData: state.actionData?.[id]
+  };
+}
 
 // lib/components.tsx
 import * as React3 from "react";
@@ -9113,7 +9126,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "7.9.3-pre.0";
+    "7.9.4-pre.0";
   }
 } catch (e) {
 }
@@ -10271,6 +10284,7 @@ export {
   useAsyncValue,
   useAsyncError,
   useBlocker,
+  useRoute,
   warnOnce,
   mapRouteProperties,
   hydrationRouteProperties,