Components

A

Edit this page

Solid-Router exposes an <A /> component as a wrapper around the native <a /> tag.

<A /> supports relative and base paths. <a /> doesn't. But <a /> gets augmented when JS is present via a top-level listener to the DOM, so you get the soft-navigation experience nonetheless.

The <A /> supports the <Router /> base property (<Router base="/subpath">) and prepend it to the received href automatically and the <a />does not. The same happens with relative paths passed to <A />.

The <A> tag has an active class if its href matches the current location, and inactive otherwise. By default matching includes locations that are descendants (e.g.: href /users matches locations /users and /users/123).


Soft Navigation

When JavaScript is present at the runtime, both components behave in a very similar fashion. This is because Solid-Router adds a listener at the top level of the DOM and will augment the native <a /> tag to a more performant experience (with soft navigation).


Props Reference

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, 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.)
stateunknownPush this value to the history stack when navigating
inactiveClassstringThe class to show when the link is inactive (when the current location doesn't match the link)
activeClassstringThe class to show when the link is active
endbooleanIf 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
Report an issue with this page