<Link /> can be used to navigate between internal or external pages.
Our Link component extends the next component so we get in page navigation and other features by default. To this we've added some extra features like event handlers and automatic handling of external links.
This is an internal link to the homepage: Home
<Link href="/">Home</Link>
This is a link with custom properties: Home with props
<Link
href="/"
style={{ color: 'var(--color-new-background)' }}
onClick={() => console.log('click')}
>
Home with click
</Link>
``
This is an external link: <Link href="https://dpdk.com/">https://dpdk.com/</Link>
```jsx
Input: <Link href="https://dpdk.com/">https://dpdk.com/</Link>
Output: <a href="https://dpdk.com/" rel="noopener noreferrer" target="_blank">https://dpdk.com/</a>
Link is a functional component and doesn't come with any styling. The node type is always
a.
/**
* Dynamically render an internal or external link
* @example
* <Link href="/">Home</Link>
* @param {object} props - Default component props
* @param {string} props.href
* @param {string} props.as
* @param {string} props.locale
* @see https://nextjs.org/docs/api-reference/next/link
*/
| Last modified | Wednesday, April 7, 2021, 8:11:27 PM UTC |
| Last author | Colin van Eenige |
| Commit ID | 176483d |