{
  "id": "44261e9239a6673df0c46923",
  "source": "solid:signals",
  "type": "github-document",
  "title": "hash-router",
  "content": "---\ntitle: HashRouter\nuse_cases: \u003e-\n  static file hosting, single html file apps, no server routing, github pages,\n  static deployment\ntags:\n  - hash-routing\n  - static-hosting\n  - client-side\n  - spa\n  - deployment\n  - component\nversion: '1.0'\ndescription: \u003e-\n  HashRouter enables client-side routing using URL hash values, perfect for\n  static file hosting where server-side routing isn't available.\n---\n\nThe `HashRouter` is a top level component that manages the routing of your application.\nIt is a client side router that uses hash-values in the URL - providing a single-page application a way to replicate the experience of a multi-page application.\n\nSince hash-routing provides a way for an application to run from a single HTML file, it can be used when hosting on a static file server.\n\nCompared to a browser-router, such as [`Router`](/solid-router/reference/components/router), is that this approach is not SEO friendly.\nBecause most search engines do not index the hash portion of a URL, they are only able to see the index page of your application when using this approach.\n\nThe `root` property is used for components that wrap a matched route and require access to the router context, relevant with navigation components that use [`\u003cA\u003e`](/solid-router/reference/components/a) links.\n\n```tsx\nimport { render } from \"solid-js/web\";\nimport { HashRouter, Route } from \"@solidjs/router\";\n\nconst App = (props) =\u003e (\n\t\u003c\u003e\n\t\t\u003ch1\u003eRoot header\u003c/h1\u003e\n\t\t{props.children}\n\t\u003c/\u003e\n);\n\nrender(\n\t() =\u003e \u003cHashRouter root={App}\u003e{/*... routes */}\u003c/HashRouter\u003e,\n\tdocument.getElementById(\"app\")\n);\n```\n\n| prop          | type                                                     | description                                                                         |\n| ------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------- |\n| children      | `JSX.Element`, `RouteDefinition`, or `RouteDefinition[]` | The route definitions                                                               |\n| root          | Component                                                | Top level layout component                                                          |\n| base          | string                                                   | Base url to use for matching routes                                                 |\n| actionBase    | string                                                   | Root url for server actions, default: `/_server`                                    |\n| preload       | boolean                                                  | Enables/disables preloads globally, default: `true`                                 |\n| explicitLinks | boolean                                                  | Disables all anchors being intercepted and instead requires [`\u003cA\u003e`](/solid-router/reference/components/a). default: `false` |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/reference/components/hash-router.mdx",
  "metadata": {
    "path": "src/routes/solid-router/reference/components/hash-router.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2932,
    "source_type": "github"
  },
  "hash": "b14df7add47d118bd13a62f3216b696a2f5f880ff0e9452abe3024277a8c2f82",
  "timestamp": "2026-02-23T11:43:00.192386057+01:00"
}