{
  "id": "96b53c49f442358edc85e942",
  "source": "solid:signals",
  "type": "github-document",
  "title": "alternative-routers",
  "content": "---\ntitle: Alternative routers\nuse_cases: \u003e-\n  single-page apps without server routing, legacy hash-based urls, testing\n  router logic, client-only navigation\ntags:\n  - hash-mode\n  - memory-mode\n  - client-side\n  - testing\n  - spa\n  - routing\nversion: '1.0'\ndescription: \u003e-\n  Learn to use hash-based and memory routers in SolidJS for client-side\n  navigation and testing without server interaction.\n---\n\nWhile the default router uses the browser's `location.pathname` to determine the current route, you can use alternative routers to change this behavior.\nThis includes:\n- [**Hash mode**](#hash-mode): Uses the hash portion of the URL to determine the current route.\n- [**Memory mode**](#memory-mode): Keeps the history of the router in memory, useful for testing.\n\n## Hash mode\n\nHash mode routing uses the hash portion of the URL to manage an application's state and navigation.\nUnlike the [default router](/solid-router/reference/components/router), the hash portion of the URL will not be handled by the server meaning this is a client-side only routing.\nTo use hash mode, replace the `\u003cRouter /\u003e` component in the application with [`\u003cHashRouter /\u003e`](/solid-router/reference/components/hash-router).\n\n```jsx del={3, 16} ins={4,17}\nimport { render } from \"solid-js/web\";\nimport {\n    Router\n    HashRouter,\n    Route\n    } from \"@solidjs/router\";\n\nconst App = (props) =\u003e (\n    \u003c\u003e\n        \u003ch1\u003eRoot header\u003c/h1\u003e\n        {props.children}\n    \u003c/\u003e\n);\n\nrender(\n    () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e,\n    () =\u003e \u003cHashRouter root={App}\u003e{/*... routes */}\u003c/HashRouter\u003e,\n    document.getElementById(\"app\")\n);\n\n```\n\n## Memory mode\n\nUnlike the default router and hash, the memory router does not interact with the browser's URL.\nThis means that while the URL in the browser's address bar will change, the router will not navigate to the new route.\nThis gives you the ability to control the router's state and history in memory which can be useful for testing purposes.\n\nTo use memory mode, replace the `\u003cRouter /\u003e` component in the application with [`\u003cMemoryRouter /\u003e`](/solid-router/reference/components/memory-router):\n\n```jsx del={3, 16} ins={4,17}\nimport { render } from \"solid-js/web\";\nimport {\n    Router\n    MemoryRouter,\n    Route\n    } from \"@solidjs/router\";\n\nconst App = (props) =\u003e (\n    \u003c\u003e\n        \u003ch1\u003eRoot header\u003c/h1\u003e\n        {props.children}\n    \u003c/\u003e\n);\n\nrender(\n    () =\u003e \u003cRouter root={App}\u003e{/*... routes */}\u003c/Router\u003e,\n    () =\u003e \u003cMemoryRouter root={App}\u003e{/*... routes */}\u003c/MemoryRouter\u003e,\n    document.getElementById(\"app\")\n);\n\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/alternative-routers.mdx",
  "metadata": {
    "path": "src/routes/solid-router/concepts/alternative-routers.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2555,
    "source_type": "github"
  },
  "hash": "4a56da1c3c701f81dc48db19a1d91c081f2b6a4f9cbf359871451eb7014f69ca",
  "timestamp": "2026-02-23T11:43:00.191586905+01:00"
}