Skip to content

Commit

Permalink
Expand info on <A /> reference to include <a /> (#718)
Browse files Browse the repository at this point in the history
  • Loading branch information
atilafassina authored May 14, 2024
1 parent 7d9203c commit f5016dd
Showing 1 changed file with 27 additions and 3 deletions.
30 changes: 27 additions & 3 deletions src/routes/solid-router/reference/components/a.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,35 @@
title: A
---

Like the [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) tag but supports relative paths and active class styling (requires client side JavaScript).
Solid-Router exposes an `<A />` component as a wrapper around the native [`<a />`](https://mdn.io/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 />`](/solid-router/reference/components/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.
**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.
By default matching includes locations that are descendants (e.g.: href `/users` matches locations `/users` and `/users/123`).

<Callout type="tip">
Use the boolean `end` prop to prevent matching these. This is particularly
useful for links to the root route `/` which would match everything.
</Callout>

## 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).

<Callout type="info">

To prevent, both `<A />` and `<a />` tags from soft navigating when JavaScript is present, pass a `target="_self"` attribute.

</Callout>

## Props Reference

| prop | type | description |
| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down

0 comments on commit f5016dd

Please sign in to comment.