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>
remix-run · Jan 25, 2023 · 8ba240f · 8ba240f
1 parent 686e20d
commit 8ba240f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/.changeset/odd-plants-doubt.md 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
@@ -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}
       </>
     );
   }