A

A is an enhanced version of the a element that supports client-side and islands routing
tsx
<A href="/page/3">Next</A>
tsx
<A href="/page/3">Next</A>

Usage

Adding a link to another page

The <A> component is designed handle links for client-side routing. It is a wrapper of the native <a> element and is a re-export from @solidjs/router. These components are progressive enhancible and can work with client-side routing even when not hydrated bridging the gap between Single Page applications and Islands.

tsx
import { A } from "solid-start";
export default function Nav() {
  return (
    <nav>
      <A href="/about">About</A>
      <A href="/">Home</A>
    </nav>
  );
}
tsx
import { A } from "solid-start";
export default function Nav() {
  return (
    <nav>
      <A href="/about">About</A>
      <A href="/">Home</A>
    </nav>
  );
}

The <A> tag also has an active class if its href matches the current location, and inactive otherwise. Note: By default matching includes locations that are descendents (eg. href /users matches locations /users and /users/123), use the boolean end prop to prevent matching these. This is particularly useful for links to the root route / which would match everything.

Reference

Props

PropTypeDescription
hrefstringThe path of the route to navigate to. This will be resolved relative to the route that the link is in, but you can preface it with `/` to refer back to the root.
noScrollbooleanIf true, turn off the default behavior of scrolling to the top of the new page.
replacebooleanIf true, turn off the default behavior of scrolling to the top of the new page.
stateunknownPush this value to the history stack when navigating.
activeClassstringThe class to show when the link is active.
inactiveClassstringThe class to show when the link is inactive (when the current location doesn't match the link).
endbooleanIf `true`, only considers the link to be active when the curent location matches the `href` exactly; if `false`, check if the current location _starts with_ `href`.