{
  "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"
}