mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
4.6 KiB
JSON
17 lines
4.6 KiB
JSON
{
|
|
"id": "de76ce8219ff39e211ea323d",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "a",
|
|
"content": "---\ntitle: A\nuse_cases: \u003e-\n creating navigation links, active link styling, soft navigation, relative\n paths, menu items\ntags:\n - component\n - navigation\n - links\n - active-states\n - anchors\n - soft-navigation\nversion: '1.0'\ndescription: \u003e-\n The A component provides enhanced anchor tags with automatic base path\n support, active states, and soft navigation for better user experience.\n---\n\nSolid Router exposes the `\u003cA /\u003e` component as a wrapper around the [native anchor tag ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).\nIt relies on the routing context provided by the [`\u003cRouter\u003e` component](/solid-router/reference/components/router) and if used outside, will triggers a runtime error..\n\n`\u003cA /\u003e` supports relative and base paths. `\u003ca /\u003e` doesn't. But `\u003ca /\u003e` gets augmented\nwhen JS is present via a top-level listener to the DOM, so you get the\nsoft-navigation experience nonetheless.\n\nThe `\u003cA /\u003e` supports the [`\u003cRouter /\u003e`](/solid-router/reference/components/router) base property (`\u003cRouter base=\"/subpath\"\u003e`) and prepend it to the received `href` automatically and the `\u003ca /\u003e`does not.\nThe same happens with relative paths passed to `\u003cA /\u003e`.\n\nThe `\u003cA\u003e` tag has an `active` class if its href matches the current location, and `inactive` otherwise.\nBy default matching includes locations that are descendants (e.g.: href `/users` matches locations `/users` and `/users/123`).\n\n:::tip\n\tUse the boolean `end` prop to prevent matching these. This is particularly\n\tuseful for links to the root route `/` which would match everything.\n:::\n\n## Soft Navigation\n\nWhen JavaScript is present at the runtime, both components behave in a very similar fashion.\nThis is because Solid Router adds a listener at the top level of the DOM and will augment the native `\u003ca /\u003e` tag to a more performant experience (with soft navigation).\n\n:::note\n\nTo prevent, both `\u003cA /\u003e` and `\u003ca /\u003e` tags from soft navigating when JavaScript is present, pass a `target=\"_self\"` attribute.\n\n:::\n\n## Props Reference\n\n| prop | type | description |\n| ------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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. |\n| noScroll | boolean | If true, turn off the default behavior of scrolling to the top of the new page |\n| 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.) |\n| state | unknown | [Push this value](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) to the history stack when navigating |\n| inactiveClass | string | The class to show when the link is inactive (when the current location doesn't match the link) |\n| activeClass | string | The class to show when the link is active |\n| 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` |",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/a.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/reference/components/a.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3947,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "2589d320f87b6b235e4c65b107559dde2b069b08198c9f88e48ce8e1a323a281",
|
|
"timestamp": "2026-02-23T11:43:00.192343467+01:00"
|
|
} |