flareact/link

To perform client-side routing between different pages of your Flareact app, use the flareact/link component:

import Link from "flareact/link";

export default function Index() {
  return (
    <div>
      <Link href="/about">
        <a>Go to About</a>
      </Link>
    </div>
  );
}

<Link> accepts a single child element. If you provide an <a> tag, it will automatically apply the href at render time.

Dynamic Routes #

In order to support dynamic routes, you need to provide an extra parameter as to the <Link> component.

In the following example, we want to link to /posts/my-first-post, which represents a dynamic page route at /pages/posts/[slug].js:

import Link from "flareact/link";

export default function Index() {
  return (
    <Link href="/posts/[slug]" as="/posts/my-first-post">
      <a>My First Post</a>
    </Link>
  );
}

Prefetch #

By default, Flareact will detect usage of <Link> in your page and:

• Prefetch the page and props if the link is in viewport (using IntersectionObserver)
• Preload the page bundle on hover

This happens only in production. You can disable this behavior by passing a false value to prefetch:

import Link from "flareact/link";

export default function Index() {
  return (
    <div>
      <Link href="/about" prefetch={false}>
        <a>Go to About</a>
      </Link>
    </div>
  );
}