<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.

Share
Code Editor
<LinkWrap href='https://www.hashicorp.com'>test link</LinkWrap>

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
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.

NameDescription
href*
string
Path to an internal or external route.
Link
React.Element
NextJS Link Component (https://nextjs.org/docs/api-reference/next/link), only required for client-side routing.
as
string
Path rendered in the browser URL bar, used for dynamic routes.
passHref
boolean
Whether Link passes its href prop to the a
prefetch
boolean
Whether to prefetch the page in the background
replace
boolean
Whether to replace the current history state instead of adding a new URL into the stack
scroll
boolean
Whether to force the window scroll and focus to reset after navigation
shallow
boolean
Whether to change the URL without running getInitialProps