#### NavLinks

Use `NavLink` when you want a link to have special styling depending on
the current page.

By default, NavLinks:

- Underline their text when active
- Are active when the current path starts with the link path

Example:

```tsx
import { NavLink } from '@47ng/chakra-next'

export default () => (
<>
Blog
>
)
```

The link will be active for the following paths:

| Path | Active |
| ----------- | ------- |
| `/home` | `false` |
| `/blog` | `true` |
| `/blog/` | `true` |
| `/blog/foo` | `true` |

##### Custom active styles

```tsx
import { NavLink } from '@47ng/chakra-next'

export default () => (
<>

Blog

>
)
```

##### Exact paths

Sometimes, you want the NavLink to be active only on exact route
matches:

```tsx
import { NavLink, navLinkMatch } from '@47ng/chakra-next'

export default () => (
<>

Home

>
)
```

You can also have custom logic to determine whether a NavLink should
be active:

```tsx
import { NavLink, navLinkMatch } from '@47ng/chakra-next'

export default () => (
<>

navLinkMatch.exact({ to, as, router }) &&
router?.query.active === 'true'
}
>
Another Blog Post

>
)
```

### Redirect

`Redirect` will change the current URL to the one given, when mounted.

```tsx
import { Redirect } from '@47ng/chakra-next'

export default ({ loggedIn }) => (
<>{loggedIn ? Hello ! : }>
)
```

By default, the redirection will be pushed onto the navigation history stack.
You can replace the history stack instead with the `replace` prop:

```tsx
import { Redirect } from '@47ng/chakra-next'

export default () => (
<>

>
)
```

Next.js dynamic paths are also supported:

```tsx
import { Redirect } from '@47ng/chakra-next'

export default () => (
<>

>
)
```

If you want to [redirect to an external link](https://github.com/vercel/next.js/blob/main/errors/invalid-href-passed.md)
(not an internal route), you will have to set the `external` prop:

```tsx
import { Redirect } from '@47ng/chakra-next'

export default () => (
<>

{/* You can also have the history replaced with external URLs: */}

>
)
```

You can also pass transition options:

```tsx

```

### Cards

```tsx
import { Card, cardProps } from '@47ng/chakra-next'

export default () => (
<>
{/* Card as Box */}
I'm in a card

{/* Apply Card styles to a custom component */}

>
)
```

### Svg

Extends `chakra.svg` with with:

- SVG namespace pre-filled
- `role="img"`

```tsx
import { Svg } from '@47ng/chakra-next'

export default () => (

A red circle

Svg lets you style SVG container tags with Chakra UI style props.



)
```

Note: to use theme tokens for fills, strokes and other SVG properties, you must
resolve them first:

```tsx
import { useToken } from '@chakra-ui/react'

export default () => (

A red circle

Svg lets you style SVG container tags with Chakra UI style props.



)
```

### NoSSR

Sometimes you want to render a component only on the client, and have a skeleton
or fallback component rendered on the server, whether for SSR or static output.

```tsx
import { NoSSR } from '@47ng/chakra-next'

export default () => (
<>
This is only rendered on the client

{/* Skeleton is rendered on SSR/SSG, TheRealThing is rendered on the client.*/}
}>


>
)
```

## Examples

Header with navigation links:

```tsx
import { Box, Stack } from '@chakra-ui/core'
import { NavLink } from '@47ng/chakra-next'

export default () => (


Features
Pricing
Documentation


)
```

## License