From 8ba240f24da4d234bc1ba3059b2fabe50f0682a6 Mon Sep 17 00:00:00 2001
From: Logan McAnsh <logan@mcan.sh>
Date: Wed, 25 Jan 2023 14:01:10 -0500
Subject: [PATCH] feat(remix-react): allow `<Link>`'s "to" prop to accept
 absolute urls (#5092)

Signed-off-by: Logan McAnsh <logan@mcan.sh>
Co-authored-by: Matt Brophy <matt@brophy.org>
---
 .changeset/odd-plants-doubt.md      |  8 ++++++++
 packages/remix-react/components.tsx | 18 ++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/odd-plants-doubt.md

diff --git a/.changeset/odd-plants-doubt.md b/.changeset/odd-plants-doubt.md
new file mode 100644
index 00000000000..0980e971305
--- /dev/null
+++ b/.changeset/odd-plants-doubt.md
@@ -0,0 +1,8 @@
+---
+"remix": patch
+"@remix-run/react": patch
+---
+
+allow `<Link>`'s "to" prop to accept absolute urls
+
+if absolute url, don't prefetch
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 8075d402fdc..348891a42a3 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -290,6 +290,10 @@ function usePrefetchBehavior(
  */
 let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
   ({ to, prefetch = "none", ...props }, forwardedRef) => {
+    let isAbsolute =
+      typeof to === "string" &&
+      (/^[a-z+]+:\/\//i.test(to) || to.startsWith("//"));
+
     let href = useHref(to);
     let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(
       prefetch,
@@ -303,13 +307,16 @@ let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
           {...props}
           {...prefetchHandlers}
         />
-        {shouldPrefetch ? <PrefetchPageLinks page={href} /> : null}
+        {shouldPrefetch && !isAbsolute ? (
+          <PrefetchPageLinks page={href} />
+        ) : null}
       </>
     );
   }
 );
 NavLink.displayName = "NavLink";
 export { NavLink };
+
 /**
  * This component renders an anchor tag and is the primary way the user will
  * navigate around your website.
@@ -318,11 +325,16 @@ export { NavLink };
  */
 let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
   ({ to, prefetch = "none", ...props }, forwardedRef) => {
+    let isAbsolute =
+      typeof to === "string" &&
+      (/^[a-z+]+:\/\//i.test(to) || to.startsWith("//"));
+
     let href = useHref(to);
     let [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(
       prefetch,
       props
     );
+
     return (
       <>
         <RouterLink
@@ -331,7 +343,9 @@ let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
           {...props}
           {...prefetchHandlers}
         />
-        {shouldPrefetch ? <PrefetchPageLinks page={href} /> : null}
+        {shouldPrefetch && !isAbsolute ? (
+          <PrefetchPageLinks page={href} />
+        ) : null}
       </>
     );
   }