<LinkWrap> Component
A component that will render a client-side routed nextjs link for local paths, and a normal <a> element for external links. If you do not pass a Link prop, it will render normal links in all cases.
The href passed to this component expects relative urls to be used for internal routes, and absolute urls to be used for external routes.
If this condition is not true, the links may not behave properly. Specifically, in the context of NextJS, this can result in internal links not using client-side transitions, or external links being erroneously prefetched. More info in this PR, and this open issue could result in changes to this behavior.
Code Editor
<LinkWrap href='https://www.hashicorp.com'>test link</LinkWrap>
Where it's used
Loading 0.x.x releases...Loading 1.x.x releases...Loading 2.x.x releases...Loading 3.x.x releases...Props
The props listed below directly affect the behavior of this component. Any other props that are passed will be reflected on to the <a> element internally, so you can still pass things like className, children, etc and they will work correctly.
| Name | Description |
|---|---|
href*string | Path to an internal or external route. |
LinkReact.Element | NextJS Link Component (https://nextjs.org/docs/api-reference/next/link), only required for client-side routing. |
asstring | Path rendered in the browser URL bar, used for dynamic routes. |
passHrefboolean | Whether Link passes its href prop to the a |
prefetchboolean | Whether to prefetch the page in the background |
replaceboolean | Whether to replace the current history state instead of adding a new URL into the stack |
scrollboolean | Whether to force the window scroll and focus to reset after navigation |
shallowboolean | Whether to change the URL without running getInitialProps |