Link
The 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 code
Anchor link to section titled "Example code"
Scroll restoration
Anchor 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 scroll
prop:
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 <Link>
component.
Name | Type | Description |
---|---|---|
to | string |
The destination URL that the link points to. This is the href attribute of the underlying <a> element. |
replace? | boolean |
Whether to update the state object or URL of the current history entry. Refer to the history.replaceState documentation. |
clientState? | any |
The custom client state with the navigation. |
reloadDocument? | boolean |
Whether to reload the whole document on navigation. |
prefetch? | boolean |
Whether to prefetch the link source when the user signals intent. Defaults to true . For more information, refer to Prefetching a link source. |
scroll? | boolean |
Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to true . |
basePath? | string |
Override the basePath inherited from the <Route> . |
Component type
Anchor link to section titled "Component type"The 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.