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 ``'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(
({ 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(
{...props}
{...prefetchHandlers}
/>
- {shouldPrefetch ? : null}
+ {shouldPrefetch && !isAbsolute ? (
+
+ ) : 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(
({ 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 (
<>
(
{...props}
{...prefetchHandlers}
/>
- {shouldPrefetch ? : null}
+ {shouldPrefetch && !isAbsolute ? (
+
+ ) : null}
>
);
}