This commit is contained in:
Tomas Dvorak
2026-02-24 10:33:59 +01:00
parent 409acd2e08
commit 898a3c303f
1374 changed files with 290409 additions and 29187 deletions
+17
View File
@@ -0,0 +1,17 @@
{
"id": "70a8f1bf2a0d7ee6b8a96a18",
"source": "solid:signals",
"type": "github-document",
"title": "linking-routes",
"content": "---\ntitle: Linking routes\nuse_cases: \u003e-\n navigation between pages, creating menu bars, active link styling, internal\n linking, user navigation\ntags:\n - navigation\n - links\n - anchors\n - active-states\n - menu\n - ui\nversion: '1.0'\ndescription: \u003e-\n Create navigation links between routes using anchor tags and the A component\n with active state styling and automatic base path handling.\n---\n\nOnce routes have been created within an application, using anchor tags will help users navigate between different views or pages.\n\n```jsx {4-5}\nconst App = (props) =\u003e (\n\t\u003c\u003e\n\t\t\u003cnav\u003e\n\t\t\t\u003ca href=\"/users\"\u003eUsers\u003c/a\u003e\n\t\t\t\u003ca href=\"/\"\u003eHome\u003c/a\u003e\n\t\t\u003c/nav\u003e\n\t\t\u003ch1\u003eMy Site with lots of pages\u003c/h1\u003e\n\t\t{props.children}\n\t\u003c/\u003e\n);\n\nrender(\n\t() =\u003e (\n\t\t\u003cRouter root={App}\u003e\n\t\t\t\u003cRoute path=\"/users\" component={Users} /\u003e\n\t\t\t\u003cRoute path=\"/\" component={Home} /\u003e\n\t\t\u003c/Router\u003e\n\t),\n\tdocument.getElementById(\"app\")\n);\n```\n\n## `\u003cA\u003e` component\n\nSolid Router also offers an [`\u003cA\u003e`](/solid-router/reference/components/a) component.\nThe `\u003cA\u003e` component is similar to the HTML anchor tag but supports automatically applying the base URL path and relative paths.\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Route, A } from \"@solidjs/router\";\n\nconst Users = lazy(() =\u003e import(\"./pages/Users\"));\nconst Home = lazy(() =\u003e import(\"./pages/Home\"));\n\nconst App = (props) =\u003e (\n\t\u003c\u003e\n\t\t\u003cnav\u003e\n\t\t\t\u003cA href=\"/users\"\u003eUsers\u003c/A\u003e\n\t\t\t\u003cA href=\"/\"\u003eHome\u003c/A\u003e\n\t\t\u003c/nav\u003e\n\t\t\u003ch1\u003eMy Site with lots of pages\u003c/h1\u003e\n\t\t{props.children}\n\t\u003c/\u003e\n);\n\nrender(\n\t() =\u003e (\n\t\t\u003cRouter root={App}\u003e\n\t\t\t\u003cRoute path=\"/users\" component={Users} /\u003e\n\t\t\t\u003cRoute path=\"/\" component={Home} /\u003e\n\t\t\u003c/Router\u003e\n\t),\n\tdocument.getElementById(\"app\")\n);\n```\n\nIn addition, the `\u003cA\u003e` component has an `active` class if its `href` matches the current location, and `inactive` otherwise.\nThis provides the link with a CSS class to show when the link is active or inactive.\n\n```jsx\n\u003cA href=\"/users\" activeClass=\"underlined\" inactiveClass=\"default\"\u003e\n\tUsers\n\u003c/A\u003e\n```\n\nBy default, matching using the `\u003cA\u003e` component includes locations that are _descendants_ (eg. `/users` and `/users/123`).\nThis component offers the `end` prop, which takes in a boolean to prevent matching these.\nThis can be useful when links to the root route (`/`) would match everything.",
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/linking-routes.mdx",
"metadata": {
"path": "src/routes/solid-router/getting-started/linking-routes.mdx",
"repo": "solidjs/solid-docs",
"repo_url": "https://github.com/solidjs/solid-docs.git",
"size": 2292,
"source_type": "github"
},
"hash": "c1f8edb9137dac7161f5b8cbb8b15335af53b516ad36e4791ad5da307674fa03",
"timestamp": "2026-02-23T11:43:00.192206931+01:00"
}