A
A
is an enhanced version of the a
element that supports client-side and islands routing.
tsx
<A ="/page/3">Next</ href > A
tsx
<A ="/page/3">Next</ href > A
Usage
Adding a link to another page
The <A>
component is designed to 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 enhance-able 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 activeClass
class if its href matches the current location, and inactiveClass
otherwise. Note: By default matching includes locations that are descendants (e.g. 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
Prop | Type | Description |
---|---|---|
href | string | The 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. |
noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page. |
replace | boolean | If true, don't add a new entry to the browser history. (By default, the new page will be added to the browser history, so pressing the back button will take you to the previous route.) |
state | unknown | Push this value to the history stack when navigating. |
activeClass | string | The class to show when the link is active. |
inactiveClass | string | The class to show when the link is inactive (when the current location doesn't match the link). |
end | boolean | If `true`, only considers the link to be active when the current location matches the `href` exactly; if `false`, check if the current location _starts with_ `href`. |