LinkActive

A Next.js route link that puts an active boolean prop on the child if the link matches the current route path.

It implements the Next.js <Link> component.

Props

Use any valid <Link> props.

Examples

Deep import.
import LinkActive from 'device-agnostic-ui/public/components/LinkActive.js';
Deep require.
const LinkActive = require('device-agnostic-ui/public/components/LinkActive');
Index import. Convenient, but technically inferior to a deep import.
import { LinkActive } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { LinkActive } = require('device-agnostic-ui');
With the <LinkNav> and <Nav> components.
import { LinkActive, LinkNav, Nav } from 'device-agnostic-ui';

const result = (
  <Nav>
    <LinkActive href="/components/LinkActive" passHref>
      <LinkNav>LinkActive</LinkNav>
    </LinkActive>
    <LinkActive href="/components/LinkNav" passHref>
      <LinkNav>LinkNav</LinkNav>
    </LinkActive>
  </Nav>
);