Edit in GitHubLog an issue

Link

The Link component wraps the react-router-dom Link component, but adds intelligent prefetching behavior to speed up performance. Our Link component binds to an IntersectionObserver to prefetch the target page's type (such as product-page), only when the link is visible in the viewport. And when possible, our Link loads the page information from local cache. And when possible, our Link loads the page from local cache to prevent unnecessary roundtrips to the server. In short, the Link component builds in all the best-practices that Google recommends when prefetching content for fast transitions.

Properties

NameTypeDescription
shouldPrefetchbooltrue activates prefetching the target page when the link becomes visible in the viewport.
tostringFrom react-router-dom Link. The absolute path to the target page of the link. Uses the to prop from the react-router-dom Link.

Example (Basic usage)

Copied to your clipboard
<Link shouldPrefetch={true} to="/about/">About Us</Link>

Properties

NameTypeDefaultDescription
[prefetchType]boolfalseDeprecated. Use shouldPrefetch instead.
[shouldPrefetch]boolfalseDetermine if the link should be prefetched using IntersectionObserver.

Source Code: pwa-studio/packages/venia-ui/lib/components/Link/link.js

  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.