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} ); }