@navinc/base-react-components/src/link.readme.md

Nav's Pattern Library

# <Link />

The `Link` component is a Nav styled React Router Link component by default. 99% of the time, this is what we want to use.

## href

`<Link />` requires an `href` prop. This differs from the api for the React Router Link which requires a `to` prop. The `Link` component will map the `href` prop to React Router Link's `to` prop in most cases.

```jsx
<Link href="/home">Take me home</Link>
```

## target

If we find ourselves in need of a traditional anchor link, adding a standard `target` prop to the component will switch the underlying component from a React Router Link to a traditional anchor link.

A value of `_blank` will open the link in a new tab/window.

A value of `_self` will force a full page load at the specified `href` in the same window. If a link is meant to leave the app and stay in the same window, `_self` _must_ be set as the `target` value or the link will not work.

```jsx
<Link href="/full/page/reload" target="_self">
  Reload page
</Link>
```

```jsx
<Link href="https://partner-site.com" target="_blank">
  New tab
</Link>
```

## onClick

Specify a custom action to take place when the link is clicked. The `<Link />` component automatically handles tracking functionality and is configurable with props. It is not necessary to manually add a `track` call unless tracking something other than a click interaction.