Link component is used to navigate between routes. Because it renders an underlying
<a> element, all properties available to the
<a> element are also available to the
Link component. For more information, refer to the
<a> element documentation.
Example codeAnchor link to section titled "Example code"
Scroll restorationAnchor link to section titled "Scroll restoration"
By default, when you click a
<Link> component, Hydrogen emulates default browser behavior and attempts to restore the scroll position that was previously used in the visitor's session. For new pages, the
<Link> component defaults to scrolling to the top of the page.
However, if you want to build a user interface that re-renders server components and updates the URL, but doesn't modify the scroll position, then you can disable scroll restoration using the
<Link> component automatically prepends a
basePath to the destination URL. That
basePath is inherited from the
<FileRoutes> component it is rendered within. You can override this default behavior by passing a custom
basePath prop to the
||The destination URL that the link points to. This is the
||Whether to update the state object or URL of the current history entry. Refer to the history.replaceState documentation.|
||The custom client state with the navigation.|
||Whether to reload the whole document on navigation.|
||Whether to prefetch the link source when the user signals intent. Defaults to
||Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to
Component typeAnchor link to section titled "Component type"
Link component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.