cleanup plumbing, add shared utility for to parsing

Author: jacob-ebey

.changeset/early-doors-obey.md

@@ -1,6 +1,6 @@
 ---
-"@react-router/dev": minor
-"react-router": minor
+"@react-router/dev": patch
+"react-router": patch
 ---
 
 add support for throwing redirect Response's at RSC render time

integration/rsc/rsc-nojs-test.ts

@@ -111,10 +111,15 @@ implementations.forEach((implementation) => {
                 throw redirect("/render-redirect/redirected");
               }
 
+              if (id === "external") {
+                throw redirect("https://example.com/");
+              }
+
               return (
                 <>
                   <h1>{id || "home"}</h1>
                   <Link to="/render-redirect/redirect">Redirect</Link>
+                  <Link to="/render-redirect/external">External</Link>
                 </>
               )
             }
@@ -138,10 +143,15 @@ implementations.forEach((implementation) => {
                 throw redirect("/render-redirect/lazy/redirected");
               }
 
+              if (id === "external") {
+                throw redirect("https://example.com/");
+              }
+
               return (
                 <>
                   <h1>{id || "home"}</h1>
                   <Link to="/render-redirect/lazy/redirect">Redirect</Link>
+                  <Link to="/render-redirect/external">External</Link>
                 </>
               );
             }
@@ -205,13 +215,23 @@ implementations.forEach((implementation) => {
     }) => {
       await page.goto(`http://localhost:${port}/render-redirect`);
       await expect(page.getByText("home")).toBeAttached();
-      await page.click("a");
+      await page.getByText("Redirect").click();
       await page.waitForURL(
         `http://localhost:${port}/render-redirect/redirected`,
       );
       await expect(page.getByText("redirected")).toBeAttached();
     });
 
+    test("Suppport throwing external redirect Response from render", async ({
+      page,
+    }) => {
+      await page.goto(`http://localhost:${port}/render-redirect`);
+      await expect(page.getByText("home")).toBeAttached();
+      await page.getByText("External").click();
+      await page.waitForURL(`https://example.com/`);
+      await expect(page.getByText("Example Domain")).toBeAttached();
+    });
+
     test("Suppport throwing redirect Response from suspended render", async ({
       page,
     }) => {
@@ -221,5 +241,13 @@ implementations.forEach((implementation) => {
       );
       await expect(page.getByText("redirected")).toBeAttached();
     });
+
+    test("Suppport throwing external redirect Response from suspended render", async ({
+      page,
+    }) => {
+      await page.goto(`http://localhost:${port}/render-redirect/lazy/external`);
+      await page.waitForURL(`https://example.com/`);
+      await expect(page.getByText("Example Domain")).toBeAttached();
+    });
   });
 });

integration/rsc/rsc-test.ts

@@ -1479,10 +1479,15 @@ implementations.forEach((implementation) => {
                   throw redirect("/render-redirect/redirected");
                 }
 
+                if (id === "external") {
+                  throw redirect("https://example.com/")
+                }
+
                 return (
                   <>
                     <h1>{id || "home"}</h1>
                     <Link to="/render-redirect/redirect">Redirect</Link>
+                    <Link to="/render-redirect/external">External</Link>
                   </>
                 )
               }
@@ -1506,10 +1511,15 @@ implementations.forEach((implementation) => {
                   throw redirect("/render-redirect/lazy/redirected");
                 }
 
+                if (id === "external") {
+                  throw redirect("https://example.com/")
+                }
+
                 return (
                   <>
                     <h1>{id || "home"}</h1>
                     <Link to="/render-redirect/lazy/redirect">Redirect</Link>
+                    <Link to="/render-redirect/external">External</Link>
                   </>
                 );
               }
@@ -1798,24 +1808,44 @@ implementations.forEach((implementation) => {
         }) => {
           await page.goto(`http://localhost:${port}/render-redirect`);
           await expect(page.getByText("home")).toBeAttached();
-          await page.click("a");
+          await page.getByText("Redirect").click();
           await page.waitForURL(
             `http://localhost:${port}/render-redirect/redirected`,
           );
           await expect(page.getByText("redirected")).toBeAttached();
         });
 
+        test("Suppport throwing external redirect Response from render", async ({
+          page,
+        }) => {
+          await page.goto(`http://localhost:${port}/render-redirect`);
+          await expect(page.getByText("home")).toBeAttached();
+          await page.getByText("External").click();
+          await page.waitForURL(`https://example.com/`);
+          await expect(page.getByText("Example Domain")).toBeAttached();
+        });
+
         test("Suppport throwing redirect Response from suspended render", async ({
           page,
         }) => {
           await page.goto(`http://localhost:${port}/render-redirect/lazy`);
           await expect(page.getByText("home")).toBeAttached();
-          await page.click("a");
+          await page.getByText("Redirect").click();
           await page.waitForURL(
             `http://localhost:${port}/render-redirect/lazy/redirected`,
           );
           await expect(page.getByText("redirected")).toBeAttached();
         });
+
+        test("Suppport throwing external redirect Response from suspended render", async ({
+          page,
+        }) => {
+          await page.goto(`http://localhost:${port}/render-redirect/lazy`);
+          await expect(page.getByText("home")).toBeAttached();
+          await page.getByText("External").click();
+          await page.waitForURL(`https://example.com/`);
+          await expect(page.getByText("Example Domain")).toBeAttached();
+        });
       });
 
       test.describe("Server Actions", () => {

packages/react-router/lib/components.tsx

@@ -54,6 +54,7 @@ import {
   FetchersContext,
   LocationContext,
   NavigationContext,
+  RSCRouterContext,
   RouteContext,
   ViewTransitionContext,
 } from "./context";
@@ -400,12 +401,6 @@ export interface RouterProviderProps {
    * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
    */
   unstable_useTransitions?: boolean;
-
-  /**
-   * Control whether rsc specific behaviors are enabled. This includes
-   * `unstable_useTransitions` and redirects thrown at render time.
-   */
-  unstable_rsc?: boolean;
 }
 
 /**
@@ -438,16 +433,15 @@ export interface RouterProviderProps {
  * @param {RouterProviderProps.unstable_onError} props.unstable_onError n/a
  * @param {RouterProviderProps.router} props.router n/a
  * @param {RouterProviderProps.unstable_useTransitions} props.unstable_useTransitions n/a
- * @param {RouterProviderProps.unstable_rsc} props.unstable_rsc n/a
  * @returns React element for the rendered router
  */
 export function RouterProvider({
   router,
   flushSync: reactDomFlushSyncImpl,
   unstable_onError,
   unstable_useTransitions,
-  unstable_rsc,
 }: RouterProviderProps): React.ReactElement {
+  let unstable_rsc = React.useContext(RSCRouterContext);
   unstable_useTransitions = unstable_useTransitions || unstable_rsc;
 
   let [_state, setStateImpl] = React.useState(router.state);
@@ -728,7 +722,6 @@ export function RouterProvider({
                   future={router.future}
                   state={state}
                   unstable_onError={unstable_onError}
-                  unstable_rsc={unstable_rsc}
                 />
               </Router>
             </ViewTransitionContext.Provider>
@@ -775,22 +768,13 @@ function DataRoutes({
   future,
   state,
   unstable_onError,
-  unstable_rsc,
 }: {
   routes: DataRouteObject[];
   future: DataRouter["future"];
   state: RouterState;
   unstable_onError: unstable_ClientOnErrorFunction | undefined;
-  unstable_rsc: boolean | undefined;
 }): React.ReactElement | null {
-  return useRoutesImpl(
-    routes,
-    undefined,
-    state,
-    unstable_onError,
-    unstable_rsc,
-    future,
-  );
+  return useRoutesImpl(routes, undefined, state, unstable_onError, future);
 }
 
 /**

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -80,11 +80,9 @@ function initSsrInfo(): void {
 function createHydratedRouter({
   getContext,
   unstable_instrumentations,
-  unstable_rsc,
 }: {
   getContext?: RouterInit["getContext"];
   unstable_instrumentations?: unstable_ClientInstrumentation[];
-  unstable_rsc?: boolean;
 }): DataRouter {
   initSsrInfo();
 
@@ -179,9 +177,7 @@ function createHydratedRouter({
     hydrationRouteProperties,
     unstable_instrumentations,
     mapRouteProperties,
-    future: {
-      unstable_rsc,
-    },
+    future: {},
     dataStrategy: getTurboStreamSingleFetchDataStrategy(
       () => router,
       ssrInfo.manifest,
@@ -319,13 +315,6 @@ export interface HydratedRouterProps {
    * For more information, please see the [docs](https://reactrouter.com/explanation/react-transitions).
    */
   unstable_useTransitions?: boolean;
-
-  /**
-   * Control whether RSC specific behaviors are introduced. This currently
-   * enables the unstable_useTransitions flag, as well as the ability to handle
-   * thrown redirect responses during the render phase.
-   */
-  unstable_rsc?: boolean;
 }
 
 /**
@@ -345,7 +334,6 @@ export function HydratedRouter(props: HydratedRouterProps) {
     router = createHydratedRouter({
       getContext: props.getContext,
       unstable_instrumentations: props.unstable_instrumentations,
-      unstable_rsc: props.unstable_rsc,
     });
   }
 

packages/react-router/lib/dom/lib.tsx

@@ -36,6 +36,7 @@ import {
   ErrorResponseImpl,
   joinPaths,
   matchPath,
+  parseToInfo,
   stripBasename,
 } from "../router/utils";
 
@@ -1412,39 +1413,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       React.useContext(NavigationContext);
     let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
 
-    // Rendered into <a href> for absolute URLs
-    let absoluteHref;
-    let isExternal = false;
-
-    if (typeof to === "string" && isAbsolute) {
-      // Render the absolute href server- and client-side
-      absoluteHref = to;
-
-      // Only check for external origins client-side
-      if (isBrowser) {
-        try {
-          let currentUrl = new URL(window.location.href);
-          let targetUrl = to.startsWith("//")
-            ? new URL(currentUrl.protocol + to)
-            : new URL(to);
-          let path = stripBasename(targetUrl.pathname, basename);
-
-          if (targetUrl.origin === currentUrl.origin && path != null) {
-            // Strip the protocol/origin/basename for same-origin absolute URLs
-            to = path + targetUrl.search + targetUrl.hash;
-          } else {
-            isExternal = true;
-          }
-        } catch (e) {
-          // We can't do external URL detection without a valid URL
-          warning(
-            false,
-            `<Link to="${to}"> contains an invalid URL which will probably break ` +
-              `when clicked - please update to a valid URL path.`,
-          );
-        }
-      }
-    }
+    let parsed = parseToInfo(to, basename);
+    to = parsed.to;
 
     // Rendered into <a href> for relative URLs
     let href = useHref(to, { relative });
@@ -1476,8 +1446,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
       <a
         {...rest}
         {...prefetchHandlers}
-        href={absoluteHref || href}
-        onClick={isExternal || reloadDocument ? onClick : handleClick}
+        href={parsed.absoluteURL || href}
+        onClick={parsed.isExternal || reloadDocument ? onClick : handleClick}
         ref={mergeRefs(forwardedRef, prefetchRef)}
         target={target}
         data-discover={

packages/react-router/lib/dom/server.tsx

@@ -232,21 +232,12 @@ function DataRoutes({
   routes,
   future,
   state,
-  unstable_rsc,
 }: {
   routes: DataRouteObject[];
   future: DataRouter["future"];
   state: RouterState;
-  unstable_rsc?: boolean;
 }): React.ReactElement | null {
-  return useRoutesImpl(
-    routes,
-    undefined,
-    state,
-    undefined,
-    unstable_rsc,
-    future,
-  );
+  return useRoutesImpl(routes, undefined, state, undefined, future);
 }
 
 function serializeErrors(

packages/react-router/lib/errors.ts

@@ -4,23 +4,33 @@ const ERROR_DIGEST_REDIRECT = "REDIRECT";
 export function createRedirectErrorDigest(response: Response) {
   return `${ERROR_DIGEST_BASE}:${ERROR_DIGEST_REDIRECT}:${JSON.stringify({
     status: response.status,
+    statusText: response.statusText,
     location: response.headers.get("Location"),
+    reloadDocument: response.headers.get("X-Remix-Reload-Document") === "true",
+    replace: response.headers.get("X-Remix-Replace") === "true",
   })}`;
 }
 
-export function decodeRedirectErrorDigest(
-  digest: string,
-): undefined | { status: number; location: string } {
+export function decodeRedirectErrorDigest(digest: string):
+  | undefined
+  | {
+      status: number;
+      statusText: string;
+      location: string;
+      reloadDocument: boolean;
+      replace: boolean;
+    } {
   if (digest.startsWith(`${ERROR_DIGEST_BASE}:${ERROR_DIGEST_REDIRECT}:{`)) {
     try {
       let parsed = JSON.parse(digest.slice(28));
       if (
         typeof parsed === "object" &&
         parsed &&
-        "status" in parsed &&
         typeof parsed.status === "number" &&
-        "location" in parsed &&
-        typeof parsed.location === "string"
+        typeof parsed.statusText === "string" &&
+        typeof parsed.location === "string" &&
+        typeof parsed.reloadDocument === "boolean" &&
+        typeof parsed.replace === "boolean"
       ) {
         return parsed;
       }