Devour/devour_data/docs/navigation.json

{
  "id": "e472138e3ac6a5b147fb77cf",
  "source": "solid:signals",
  "type": "github-document",
  "title": "navigation",
  "content": "---\ntitle: Navigation\nuse_cases: \u003e-\n  page transitions, programmatic routing, user actions, form submissions,\n  authentication flows, redirects\ntags:\n  - navigation\n  - links\n  - redirects\n  - routing\n  - programmatic\nversion: '1.0'\ndescription: \u003e-\n  Navigate between routes in SolidJS using links, programmatic navigation, and\n  redirects for seamless user experiences.\n---\n\nWhen using Solid Router, you can use the standard standard HTML [`\u003ca\u003e` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a), which triggers [soft navigation](/solid-router/reference/components/a#soft-navigation).\nIn addition to using this, Solid Router offers other options for navigating between routes:\n\n- The [`\u003cA\u003e` component](/solid-router/reference/components/a).\n- The [`useNavigate` primitive](/solid-router/reference/primitives/use-navigate).\n- The [`redirect` function](/solid-router/reference/response-helpers/redirect).\n\n## `\u003cA\u003e` component\n\nThe `\u003cA\u003e` component extends the native `\u003ca\u003e` element by automatically applying the base URL path and, additionally, supports relative paths.\n\n```tsx\nimport { A } from \"@solidjs/router\";\n\nfunction DashboardPage() {\n\treturn (\n\t\t\u003cmain\u003e\n\t\t\t\u003cnav\u003e\n\t\t\t\t\u003cA href=\"/\"\u003eHome\u003c/A\u003e\n\t\t\t\u003c/nav\u003e\n\t\t\t{/* This is a relative path that, from /dashboard, links to /dashboard/users */}\n\t\t\t\u003cA href=\"users\"\u003eUsers\u003c/A\u003e\n\t\t\u003c/main\u003e\n\t);\n}\n```\n\nSee the [`\u003cA\u003e` API reference](/solid-router/reference/components/a) for more information.\n\n### Styling\n\nThe `\u003cA\u003e` component allows you to style links based on their active state using the `activeClass` and `inactiveClass` props.\nWhen provided, these props apply the corresponding CSS classes to the link.\nIf omitted, the default classes `active` and `inactive` are used.\n\nBy default, a link is considered active when the current route matches the link's `href` or any of its descendant routes.\nFor example, a link with `href=\"/dashboard\"` is active when the current route is `/dashboard`, `/dashboard/users`, or `/dashboard/users/1/profile`.\n\nTo match an exact route, the prop `end` can be used.\nWhen `true`, it ensures that the link is only considered active if the `href` exactly matches the current route.\nThis is useful for root route links (href=\"/\"), which might otherwise match all routes.\n\n```tsx\nimport { A } from \"@solidjs/router\";\n\nfunction Navbar() {\n\treturn (\n\t\t\u003cnav\u003e\n\t\t\t\u003cA href=\"/\" end={true}\u003e\n\t\t\t\tHome\n\t\t\t\u003c/A\u003e\n\t\t\t\u003cA\n\t\t\t\thref=\"/login\"\n\t\t\t\tactiveClass=\"text-blue-900\"\n\t\t\t\tinactiveClass=\"text-blue-500\"\n\t\t\t\u003e\n\t\t\t\tLogin\n\t\t\t\u003c/A\u003e\n\t\t\u003c/nav\u003e\n\t);\n}\n```\n\n## `useNavigate` primitive\n\nThe `useNavigate` primitive allows for programmatically navigating to a specified route.\n\n```tsx\nimport { useNavigate } from \"@solidjs/router\";\n\nfunction LoginPage() {\n\tconst navigate = useNavigate();\n\n\treturn (\n\t\t\u003cbutton\n\t\t\tonClick={() =\u003e {\n\t\t\t\t// Login logic\n\t\t\t\tnavigate(\"/dashboard\", { replace: true });\n\t\t\t}}\n\t\t\u003e\n\t\t\tLogin\n\t\t\u003c/button\u003e\n\t);\n}\n```\n\nThis example redirects the user to `/dashboard` after login.\nBy using `replace: true`, the login page is removed from the browser's history stack and replaced with the `/dashboard` route.\nThis prevents the user from navigating back to the login page using the back button.\n\nSee the [`useNavigate` API reference](/solid-router/reference/primitives/use-navigate) for more information.\n\n## `redirect` function\n\nThe `redirect` function returns a [`Response` object](https://developer.mozilla.org/en-US/docs/Web/API/Response), which enables navigation to a specified route within [query](/solid-router/reference/data-apis/query) or [action](/solid-router/reference/data-apis/action).\n\n```tsx\nimport { action, redirect } from \"@solidjs/router\";\n\nconst logout = action(async () =\u003e {\n\tlocalStorage.remove(\"token\");\n\tthrow redirect(\"/\");\n});\n```\n\nSee the [`redirect` API reference](/solid-router/reference/response-helpers/redirect) for more information.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/navigation.mdx",
  "metadata": {
    "path": "src/routes/solid-router/concepts/navigation.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 3946,
    "source_type": "github"
  },
  "hash": "0bef55b07e29e7867039304fcfe32e821160fec3ba4b5474e8bbc6c2916d3854",
  "timestamp": "2026-02-23T11:43:00.191736346+01:00"
}