Link

This page goes over the included Link component we ship.

The link component is a component wrapper to an anchor <a> element. However, it differs from an anchor element, since it uses Elegance's client-side navigation.

Usage

Simply import the component from the /link path of elegance-js and use it anywhere. Like all elements, it can be used in ts and tsx.

tsx

import Link from "elegance-js/link";

export default function Page() {
    return <div>
        <Link href="/recipes">Recipes</Link>
    </div>
}

Other Options

Other than the required href option, the Link element also features a preload option. This option (default off), let's you fetch a page before the user actually presses the navigation button, allowing for much quicker navigation.

The supported options are:

"load": Fetch after hydration.
"hover": Fetch on the mouseenter event.