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

## trackingContext

The `trackingContext` prop allows us to configure the built-in track call by passing in standard tracking properties.

```js
{
  context,
  category,
  label,
  name,
  target,
  ...otherProperties
}
```

These properties will be merged into a generic interaction track like this:

```js
track({
  type: `interaction_${context || 'link'}`,
  payload: {
    category: category || 'link',
    label: label || event.target.innerText,
    name: name || event.target.innerText,
    target: target || event.target.href,
    ...otherProperties,
  },
})
```

Thus we can highly configure the track call, or allow the defaults to be called without having to worry about it.