{"id":13532499,"url":"https://github.com/LXSMNSYC/solid-tiny-router","last_synced_at":"2025-04-01T20:32:16.000Z","repository":{"id":53843499,"uuid":"424805299","full_name":"lxsmnsyc/solid-tiny-router","owner":"lxsmnsyc","description":"Tiny routing library for SolidJS","archived":false,"fork":false,"pushed_at":"2022-05-27T02:03:55.000Z","size":532,"stargazers_count":23,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T07:51:28.700Z","etag":null,"topics":["router","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lxsmnsyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-05T02:32:43.000Z","updated_at":"2024-01-04T17:02:59.000Z","dependencies_parsed_at":"2022-08-23T20:10:27.759Z","dependency_job_id":null,"html_url":"https://github.com/lxsmnsyc/solid-tiny-router","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-tiny-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-tiny-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-tiny-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Fsolid-tiny-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/solid-tiny-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709923,"owners_count":20821297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["router","solid-js"],"created_at":"2024-08-01T07:01:11.390Z","updated_at":"2025-04-01T20:32:10.990Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","readme":"# solid-tiny-router\n\n\u003e Tiny routing library for SolidJS\n\n[![NPM](https://img.shields.io/npm/v/solid-tiny-router.svg)](https://www.npmjs.com/package/solid-tiny-router) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square\u0026logo=codesandbox)](https://codesandbox.io/s/github/LXSMNSYC/solid-tiny-router/tree/main/examples/all-demo)\n\n## Install\n\n```bash\nnpm i solid-tiny-router\n```\n\n```bash\nyarn add solid-tiny-router\n```\n\n```bash\npnpm add solid-tiny-router\n```\n\n## Features\n\n- Easy to use: Only 2 components and a 2 utility: `\u003cRouter\u003e`, `\u003cLink\u003e`, `useRouter` and `createRouterTree`!\n- Link prefetching: load pages ahead of time with `router.prefetch` and `\u003cLink prefetch\u003e`.\n\n## Usage\n\n```js\nimport { lazy } from 'solid-js';\nimport { createRouterTree, Router } from 'solid-tiny-router';\n\n// Declare routes\nconst routes = createRouterTree([\n  {\n    path: '/',\n    component: lazy(() =\u003e import('./pages')),\n  },\n  {\n    path: '/a',\n    component: lazy(() =\u003e import('./pages/a')),\n  },\n  {\n    path: '/b',\n    component: lazy(() =\u003e import('./pages/b')),\n  },\n  // Parametized route\n  {\n    path: '/parameter/[id]',\n    component: lazy(() =\u003e import('./pages/[id]')),\n  },\n  // Wildcard Route\n  {\n    path: '/wildcard/[...list]',\n    component: lazy(() =\u003e import('./pages/[...list]')),\n  },\n]);\n\nconst NotFound = lazy(() =\u003e import('./pages/404'));\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003cRouter\n        // Pass routes\n        routes={routes}\n        // Used for 404\n        fallback={\u003cNotFound /\u003e}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\n// [id].tsx\nexport default function ParametizedRoute() {\n  // Access router\n  const router = useRouter();\n  // Access parameters\n  // For wildcard routes, the params will be an array of string\n  const id = () =\u003e router.params.id;\n  return (\n    \u003cdiv\u003e\n      \u003cspan\u003e\n        {'Welcome to '}\n        \u003cspan\u003e{`Page ${id()}`}\u003c/span\u003e\n        !\n      \u003c/span\u003e\n      \u003cdiv\u003e\n        \u003cLink href=\"/\"\u003eGo to home\u003c/Link\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### `\u003cRouter\u003e`\n\nThe main routing component. `\u003cRouter\u003e` builds a routing switch from `routes` and then reactively matches the pages from the `window.location`. If no matching route is found, `fallback` rendered, which behaves like a 404 page.\n\n### `\u003cLink\u003e`\n\nNavigation component. Must be used within pages and components controlled by `\u003cRouter`\u003e. `\u003cLink\u003e` controls the page history and prevents page reload when navigating between local pages.\n\n- `prefetch` allows the given page to be prefetched. Defaults to `true`.\n- `replace` replaces the current history instead of pushing a new history.\n- `scroll` scrolls the window to the top of the page after navigation. (Possible values is `\"auto\"`, `\"smooth\"` or just `undefined`, defaults to `\"auto\"`.)\n\n### `useRouter`\n\n`useRouter` provides the router instance for controlling navigation imperatively. This can only be used within pages and components controlled by `\u003cRouter\u003e`.\n\n- `pathname` is a reactive property for tracking the `window.location.pathname`.\n- `search` is a reactive property for tracking the `window.location.search`.\n- `push(url)` pushes a new URL and navigates to the given URL.\n- `replace(url)` replaces the current history and navigates to the given URL.\n- `prefetch(url, isPriority)` prefetches the given URL.\n- `back()` is used to navigate back in history.\n- `forward()` is used to navigate forward in history.\n- `reload()` performs page reload.\n- `params` provides the object based on the parsed URL (if the path of the page is either a wildcard route, a parametized route or a combination of both).\n\nFor `push`, `replace`, `back`, and `forward`, you can pass another parameter `opts`:\n\n- `scroll` scrolls the window to the top of the page after navigation. (Possible values is `\"auto\"`, `\"smooth\"` or just `undefined`, defaults to `\"auto\"`.)\n\n### `createRouterTree`\n\nBuilds the router tree from an array of `Route`s. This is used by `\u003cRouter\u003e` to match pages and also to preload component chunks (if `lazy` was used). Must be called outside of the component and is recommended to be called only once.\n\n### SSR\n\nFor SSR, you can simply pass a `pathname` and a `search` strings to a `location` object to `\u003cRouter\u003e`\n\n```js\n\u003cRouter\n  location={{\n    pathname,\n    search,\n  }}\n/\u003e\n```\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Routing"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLXSMNSYC%2Fsolid-tiny-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLXSMNSYC%2Fsolid-tiny-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLXSMNSYC%2Fsolid-tiny-router/lists"}