Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(remix-react): allow <Link>'s "to" prop to accept absolute urls #5092

Merged
merged 11 commits into from
Jan 25, 2023
Merged

feat(remix-react): allow <Link>'s "to" prop to accept absolute urls #5092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f5b4353
feat(remix-react): allow Link's "to" prop to accept external urls and…
mcansh Jan 13, 2023
785bd27
chore: use prerender and dns-prefetch
mcansh Jan 13, 2023
def814a
chore: update absolute URL check
mcansh Jan 17, 2023
b5f4867
chore: remove prefetch/prerender for absolute urls
mcansh Jan 25, 2023
b04d38a
test: remove external url prefetch tests
mcansh Jan 25, 2023
07be848
chore: add external support to NavLink
mcansh Jan 25, 2023
1339179
chore: forward 'to' along to RR
mcansh Jan 25, 2023
b5f0396
chore: Apply suggestions from code review
mcansh Jan 25, 2023
eb0ece7
chore: Apply suggestions from code review
mcansh Jan 25, 2023
7515d62
chore: remove unused import
mcansh Jan 25, 2023
e69f19d
Create odd-plants-doubt.md
mcansh Jan 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/odd-plants-doubt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
18 changes: 16 additions & 2 deletions packages/remix-react/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -303,13 +307,16 @@ let NavLink = React.forwardRef<HTMLAnchorElement, RemixNavLinkProps>(
{...props}
{...prefetchHandlers}
/>
{shouldPrefetch ? <PrefetchPageLinks page={href} /> : null}
{shouldPrefetch && !isAbsolute ? (
<PrefetchPageLinks page={href} />
) : null}
Comment on lines +310 to +312
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love this simplified approach 👌

</>
);
}
);
NavLink.displayName = "NavLink";
export { NavLink };

/**
* This component renders an anchor tag and is the primary way the user will
* navigate around your website.
Expand All @@ -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
Expand All @@ -331,7 +343,9 @@ let Link = React.forwardRef<HTMLAnchorElement, RemixLinkProps>(
{...props}
{...prefetchHandlers}
/>
{shouldPrefetch ? <PrefetchPageLinks page={href} /> : null}
{shouldPrefetch && !isAbsolute ? (
<PrefetchPageLinks page={href} />
) : null}
</>
);
}
Expand Down