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 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
| Name | Type | Description |
|---|---|---|
shouldPrefetch | bool | true activates prefetching the target page when the link becomes visible in the viewport. |
to | string | From 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
| Name | Type | Default | Description |
|---|---|---|---|
[prefetchType] | bool | false | Deprecated. Use shouldPrefetch instead. |
[shouldPrefetch] | bool | false | Determine if the link should be prefetched using IntersectionObserver. |
Source Code: pwa-studio/packages/venia-ui/lib/components/Link/link.js
